From 49a236bf898010739ad207c4a8aa3032d46ba6b5 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Sun, 11 Feb 2018 06:58:59 -0500 Subject: [PATCH] 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 --- package.json | 2 +- src/components/Message.js | 8 +- src/components/Message.test.js | 3 +- .../__snapshots__/Message.test.js.snap | 4 +- src/pages/404.js | 4 +- src/style.css | 4 +- src/template.js | 8 +- webpack.common.js | 2 +- yarn.lock | 98 +++++++++++++++---- 9 files changed, 98 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index 7adda20..ccffe8b 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/components/Message.js b/src/components/Message.js index 45a7755..3117648 100644 --- a/src/components/Message.js +++ b/src/components/Message.js @@ -6,7 +6,8 @@ const renderIcon = icon => { return; } - return ; + const Icon = icon; + return ; }; 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 }; diff --git a/src/components/Message.test.js b/src/components/Message.test.js index 717cf29..256399d 100644 --- a/src/components/Message.test.js +++ b/src/components/Message.test.js @@ -14,8 +14,9 @@ test('Message rendering', () => { }); test('Message rendering with icon', () => { + const Icon = () => 'Sample icon SVG'; const component = renderer.create( - +

Message content

 ); diff --git a/src/components/__snapshots__/Message.test.js.snap b/src/components/__snapshots__/Message.test.js.snap index a711c68..aeeb785 100644 --- a/src/components/__snapshots__/Message.test.js.snap +++ b/src/components/__snapshots__/Message.test.js.snap @@ -18,9 +18,7 @@ exports[`Message rendering with icon 1`] = ` className="message" >

- + Sample icon SVG Testing

diff --git a/src/pages/404.js b/src/pages/404.js index 8ca7bf7..3fa24fd 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -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( - +

The page you have requested could not be found

, document.getElementById('root')); diff --git a/src/style.css b/src/style.css index 4dceb0e..a21781d 100644 --- a/src/style.css +++ b/src/style.css @@ -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; diff --git a/src/template.js b/src/template.js index 299e76c..eab3091 100644 --- a/src/template.js +++ b/src/template.js @@ -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 = '' + ReactDOMServer.renderToString( @@ -25,13 +25,13 @@ module.exports = '' + ReactDOMServer.renderToString(