use svgr to generate icon components (#82)

Dockerfile

@@ -0,0 +1,7 @@
+FROM node:8.9 AS build
+WORKDIR /app
+COPY . /app
+RUN yarn run build
+
+FROM bitnami/nginx
+COPY --from=build /app/build /app

src/components/Footer/Footer.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import logo from "../../logo.svg";
 
 // Icons
-import Heart from "!react-svg-loader!open-iconic/svg/heart.svg";
+import Heart from "../../icons/Heart";
 
 class Footer extends React.Component {
   public render() {

src/components/Header/Header.tsx

@@ -8,7 +8,7 @@ import { IRouterPathname } from "../../shared/types";
 import HeaderLink, { IHeaderLinkProps } from "./HeaderLink";
 
 // Icons
-import Cog from "!react-svg-loader!open-iconic/svg/cog.svg";
+import Cog from "../../icons/Cog";
 
 import "./Header.css";
 

src/icons/Cog.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+const Cog = (props: any) => (
+  <svg viewBox="0 0 8 8" width="1em" height="1em" {...props}>
+    <path
+      fill="currentColor"
+      d="M3.5 0L3 1.19c-.1.03-.19.08-.28.13L1.53.82l-.72.72.5 1.19c-.05.1-.09.18-.13.28l-1.19.5v1l1.19.5c.04.1.08.18.13.28l-.5 1.19.72.72 1.19-.5c.09.04.18.09.28.13l.5 1.19h1L5 6.83c.09-.04.19-.08.28-.13l1.19.5.72-.72-.5-1.19c.04-.09.09-.19.13-.28l1.19-.5v-1l-1.19-.5c-.03-.09-.08-.19-.13-.28l.5-1.19-.72-.72-1.19.5c-.09-.04-.19-.09-.28-.13L4.5 0h-1zM4 2.5c.83 0 1.5.67 1.5 1.5S4.83 5.5 4 5.5 2.5 4.83 2.5 4 3.17 2.5 4 2.5z"
+    />
+  </svg>
+);
+
+export default Cog;

src/icons/Heart.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+const Heart = (props: any) => (
+  <svg viewBox="0 0 8 8" width="1em" height="1em" {...props}>
+    <path
+      fill="currentColor"
+      d="M2 1c-.55 0-1.04.23-1.41.59C.23 1.95 0 2.44 0 3c0 .55.23 1.04.59 1.41L4 7.82l3.41-3.41C7.77 4.05 8 3.56 8 3c0-.55-.23-1.04-.59-1.41C7.05 1.23 6.56 1 6 1c-.55 0-1.04.23-1.41.59C4.23 1.95 4 2.44 4 3c0-.55-.23-1.04-.59-1.41C3.05 1.23 2.56 1 2 1z"
+    />
+  </svg>
+);
+
+export default Heart;

src/icons/README.md

@@ -0,0 +1,15 @@
+These icons are generated using svgr using SVGs from the open-iconic project.
+
+In order to add a new icon, install svgr:
+
+```
+yarn global install svgr
+```
+
+Find the icon SVG file you want to use and edit it to ensure it sets `fill="currentColor"` in the path element.
+
+Then run (replacing with the icon you want to use):
+
+```
+svgr --no-semi --icon node_modules/open-iconic/svg/cog.svg > src/icons/Cog.tsx
+```

tsconfig.json

@@ -3,7 +3,8 @@
     "baseUrl": "src",
     "outDir": "build/dist",
     "module": "esnext",
-    "target": "es6",
+    "target": "es5",
+    "lib": ["dom", "es6"],
     "sourceMap": true,
     "allowJs": true,
     "jsx": "react",