Switching back to SVG components for icons
No longer need the hack to only use them in components while URLs are used in styles since I don't need icons in the styles anymore. Embedding the markup also provides the option to restyle the icons
This commit is contained in:
Jeff Avallone
parent
1de5079aa9
commit
49a236bf89
@ -44,8 +44,8 @@
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0",
|
||||
"style-loader": "^0.20.1",
|
||||
"svg-react-loader": "^0.4.5",
|
||||
"uglifyjs-webpack-plugin": "^1.1.8",
|
||||
"url-loader": "^0.6.2",
|
||||
"webpack": "^3.10.0",
|
||||
"webpack-merge": "^4.1.1",
|
||||
"workbox-webpack-plugin": "^2.1.2"
|
||||
|
||||
@ -6,7 +6,8 @@ const renderIcon = icon => {
|
||||
return;
|
||||
}
|
||||
|
||||
return <img src={ icon }/>;
|
||||
const Icon = icon;
|
||||
return <Icon/>;
|
||||
};
|
||||
|
||||
const Message = ({ icon, heading, children }) => (
|
||||
@ -17,7 +18,10 @@ const Message = ({ icon, heading, children }) => (
|
||||
);
|
||||
|
||||
Message.propTypes = {
|
||||
icon: PropTypes.string,
|
||||
icon: PropTypes.oneOfType([
|
||||
PropTypes.element,
|
||||
PropTypes.func
|
||||
]),
|
||||
heading: PropTypes.string.isRequired,
|
||||
children: PropTypes.element.isRequired
|
||||
};
|
||||
|
||||
@ -14,8 +14,9 @@ test('Message rendering', () => {
|
||||
});
|
||||
|
||||
test('Message rendering with icon', () => {
|
||||
const Icon = () => 'Sample icon SVG';
|
||||
const component = renderer.create(
|
||||
<Message heading="Testing" icon="sample-icon-url">
|
||||
<Message heading="Testing" icon={ Icon }>
|
||||
<p>Message content</p>
|
||||
</Message>
|
||||
);
|
||||
|
||||
@ -18,9 +18,7 @@ exports[`Message rendering with icon 1`] = `
|
||||
className="message"
|
||||
>
|
||||
<h2>
|
||||
<img
|
||||
src="sample-icon-url"
|
||||
/>
|
||||
Sample icon SVG
|
||||
Testing
|
||||
</h2>
|
||||
<p>
|
||||
|
||||
@ -4,10 +4,10 @@ import ReactDOM from 'react-dom';
|
||||
import '../style.css';
|
||||
|
||||
import Message from '../components/Message';
|
||||
import errorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
||||
import ErrorIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
||||
|
||||
ReactDOM.render(
|
||||
<Message icon={ errorIcon } heading="404 Page Not Found">
|
||||
<Message icon={ ErrorIcon } heading="404 Page Not Found">
|
||||
<p>The page you have requested could not be found</p>
|
||||
</Message>,
|
||||
document.getElementById('root'));
|
||||
|
||||
@ -59,7 +59,7 @@ body {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#main li img {
|
||||
#main li svg {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
@ -115,7 +115,7 @@ li {
|
||||
margin: var(--spacing-margin) 0;
|
||||
}
|
||||
|
||||
.message h2 img {
|
||||
.message h2 svg {
|
||||
margin-right: 0.5rem;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
|
||||
@ -3,8 +3,8 @@ import React from 'react';
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
|
||||
import Message from './components/Message';
|
||||
import alertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
||||
import githubIcon from 'feather-icons/dist/icons/github.svg';
|
||||
import AlertIcon from 'feather-icons/dist/icons/alert-octagon.svg';
|
||||
import GithubIcon from 'feather-icons/dist/icons/github.svg';
|
||||
|
||||
module.exports = '<!DOCTYPE html>' + ReactDOMServer.renderToString(
|
||||
<html>
|
||||
@ -25,13 +25,13 @@ module.exports = '<!DOCTYPE html>' + ReactDOMServer.renderToString(
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/javallone/regexper-static">
|
||||
<img src={ githubIcon }/>Source on GitHub
|
||||
<GithubIcon/>Source on GitHub
|
||||
</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<noscript>
|
||||
<Message icon={ alertIcon } heading="JavaScript Required">
|
||||
<Message icon={ AlertIcon } heading="JavaScript Required">
|
||||
<p>You need to enable JavaScript to use Regexper.</p>
|
||||
<p>Regexper and the tools used to create it are all open source. If you are concerned that the JavaScript being delivered is in any way malicious, please inspect the source by following the GitHub link in the header. There are two data collection tools integrated in the app: Google Analytics and Sentry.io. Google Analytics is used to track browser usage data and application performance. Sentry.io is a tool used to capture and report client-side JavaScript errors. Most popular ad blockers will prevent these tools from sending any tracking data, and doing so will <b>not</b> impact the performance of this app. Regexper is not supported by ad revenue or sales of any kind.</p>
|
||||
</Message>
|
||||
|
||||
@ -130,7 +130,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'url-loader'
|
||||
loader: 'svg-react-loader'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
98
yarn.lock
98
yarn.lock
@ -321,6 +321,10 @@ atob@^2.0.0:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/atob/-/atob-2.0.3.tgz#19c7a760473774468f20b2d2d03372ad7d4cbf5d"
|
||||
|
||||
atob@~1.1.0:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/atob/-/atob-1.1.3.tgz#95f13629b12c3a51a5d215abdce2aa9f32f80773"
|
||||
|
||||
autoprefixer@^6.3.1:
|
||||
version "6.7.7"
|
||||
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
|
||||
@ -1816,6 +1820,15 @@ css-what@2.1:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
|
||||
|
||||
css@2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/css/-/css-2.2.1.tgz#73a4c81de85db664d4ee674f7d47085e3b2d55dc"
|
||||
dependencies:
|
||||
inherits "^2.0.1"
|
||||
source-map "^0.1.38"
|
||||
source-map-resolve "^0.3.0"
|
||||
urix "^0.1.0"
|
||||
|
||||
cssdb@^1.5:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-1.5.0.tgz#e6179657bf96eb063eb316b2f5a5f4c4a2633df7"
|
||||
@ -4442,6 +4455,14 @@ loader-runner@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
|
||||
|
||||
loader-utils@1.1.0, loader-utils@^1.0.2, loader-utils@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
|
||||
dependencies:
|
||||
big.js "^3.1.3"
|
||||
emojis-list "^2.0.0"
|
||||
json5 "^0.5.0"
|
||||
|
||||
loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@^0.2.15, loader-utils@^0.2.16:
|
||||
version "0.2.17"
|
||||
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
|
||||
@ -4451,14 +4472,6 @@ loader-utils@^0.2.11, loader-utils@^0.2.14, loader-utils@^0.2.15, loader-utils@^
|
||||
json5 "^0.5.0"
|
||||
object-assign "^4.0.1"
|
||||
|
||||
loader-utils@^1.0.2, loader-utils@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
|
||||
dependencies:
|
||||
big.js "^3.1.3"
|
||||
emojis-list "^2.0.0"
|
||||
json5 "^0.5.0"
|
||||
|
||||
locate-path@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
|
||||
@ -4503,7 +4516,7 @@ lodash@3.x, lodash@^3.2.0:
|
||||
version "3.10.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
|
||||
|
||||
lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
|
||||
lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0:
|
||||
version "4.17.5"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
|
||||
|
||||
@ -6176,6 +6189,10 @@ querystringify@~1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
|
||||
|
||||
ramda@0.21.0:
|
||||
version "0.21.0"
|
||||
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
|
||||
|
||||
randomatic@^1.1.3:
|
||||
version "1.1.7"
|
||||
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
|
||||
@ -6564,7 +6581,7 @@ resolve-from@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
|
||||
|
||||
resolve-url@^0.2.1:
|
||||
resolve-url@^0.2.1, resolve-url@~0.2.1:
|
||||
version "0.2.1"
|
||||
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
|
||||
|
||||
@ -6624,6 +6641,10 @@ rx-lite@*, rx-lite@^4.0.8:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
|
||||
|
||||
rx@4.1.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
|
||||
|
||||
safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
|
||||
version "5.1.1"
|
||||
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
|
||||
@ -6885,6 +6906,15 @@ source-list-map@~0.1.7:
|
||||
version "0.1.8"
|
||||
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
|
||||
|
||||
source-map-resolve@^0.3.0:
|
||||
version "0.3.1"
|
||||
resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.3.1.tgz#610f6122a445b8dd51535a2a71b783dfc1248761"
|
||||
dependencies:
|
||||
atob "~1.1.0"
|
||||
resolve-url "~0.2.1"
|
||||
source-map-url "~0.3.0"
|
||||
urix "~0.1.0"
|
||||
|
||||
source-map-resolve@^0.5.0:
|
||||
version "0.5.1"
|
||||
resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.1.tgz#7ad0f593f2281598e854df80f19aae4b92d7a11a"
|
||||
@ -6911,10 +6941,20 @@ source-map-url@^0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
|
||||
|
||||
source-map-url@~0.3.0:
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9"
|
||||
|
||||
source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.6:
|
||||
version "0.5.7"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
|
||||
|
||||
source-map@^0.1.38:
|
||||
version "0.1.43"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
|
||||
dependencies:
|
||||
amdefine ">=0.0.4"
|
||||
|
||||
source-map@^0.4.4, source-map@~0.4.1:
|
||||
version "0.4.4"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
|
||||
@ -7182,6 +7222,17 @@ supports-color@^5.1.0:
|
||||
dependencies:
|
||||
has-flag "^2.0.0"
|
||||
|
||||
svg-react-loader@^0.4.5:
|
||||
version "0.4.5"
|
||||
resolved "https://registry.yarnpkg.com/svg-react-loader/-/svg-react-loader-0.4.5.tgz#1f324c9c7b858f5c89fac752bbe9ca3f6214f850"
|
||||
dependencies:
|
||||
css "2.2.1"
|
||||
loader-utils "1.1.0"
|
||||
ramda "0.21.0"
|
||||
rx "4.1.0"
|
||||
traverse "0.6.6"
|
||||
xml2js "0.4.17"
|
||||
|
||||
svg2png@~3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/svg2png/-/svg2png-3.0.1.tgz#a2644d68b0231ac00af431aa163714ff17106447"
|
||||
@ -7366,6 +7417,10 @@ tr46@^1.0.0:
|
||||
dependencies:
|
||||
punycode "^2.1.0"
|
||||
|
||||
traverse@0.6.6:
|
||||
version "0.6.6"
|
||||
resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
|
||||
|
||||
trim-newlines@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
|
||||
@ -7553,7 +7608,7 @@ upper-case@^1.1.1:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
|
||||
|
||||
urix@^0.1.0:
|
||||
urix@^0.1.0, urix@~0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
|
||||
|
||||
@ -7561,14 +7616,6 @@ url-join@^2.0.2:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
|
||||
|
||||
url-loader@^0.6.2:
|
||||
version "0.6.2"
|
||||
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
|
||||
dependencies:
|
||||
loader-utils "^1.0.2"
|
||||
mime "^1.4.1"
|
||||
schema-utils "^0.3.0"
|
||||
|
||||
url-parse@1.0.x:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"
|
||||
@ -7983,6 +8030,13 @@ xml-parse-from-string@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz#a9029e929d3dbcded169f3c6e28238d95a5d5a28"
|
||||
|
||||
xml2js@0.4.17:
|
||||
version "0.4.17"
|
||||
resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.17.tgz#17be93eaae3f3b779359c795b419705a8817e868"
|
||||
dependencies:
|
||||
sax ">=0.6.0"
|
||||
xmlbuilder "^4.1.0"
|
||||
|
||||
xml2js@>=0.2.4, xml2js@^0.4.5:
|
||||
version "0.4.19"
|
||||
resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
|
||||
@ -7990,6 +8044,12 @@ xml2js@>=0.2.4, xml2js@^0.4.5:
|
||||
sax ">=0.6.0"
|
||||
xmlbuilder "~9.0.1"
|
||||
|
||||
xmlbuilder@^4.1.0:
|
||||
version "4.2.1"
|
||||
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-4.2.1.tgz#aa58a3041a066f90eaa16c2f5389ff19f3f461a5"
|
||||
dependencies:
|
||||
lodash "^4.0.0"
|
||||
|
||||
xmlbuilder@~9.0.1:
|
||||
version "9.0.7"
|
||||
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user