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

src/components/Message.js

@@ -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
 };

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 heading="Testing" icon="sample-icon-url">
+    <Message heading="Testing" icon={ Icon }>
       <p>Message content</p>
     </Message>
   );

src/components/__snapshots__/Message.test.js.snap

@@ -18,9 +18,7 @@ exports[`Message rendering with icon 1`] = `
   className="message"
 >
   <h2>
-    <img
-      src="sample-icon-url"
-    />
+    Sample icon SVG
     Testing
   </h2>
   <p>