use SVGR directly

.gitignore

@@ -11,3 +11,4 @@ yarn-debug.log*
 yarn.lock
 package-lock.json
 plugins/gatsby-plugin-matomo
+src/components/svg

gatsby-config.js

@@ -58,14 +58,6 @@ module.exports = {
         localScript: '/piwik.js'
       }
     },
-    {
-      resolve: 'gatsby-plugin-svgr',
-      options: {
-        icon: false,
-        viewBox: true
-        // see https://github.com/smooth-code/svgr for a list of all options
-      }
-    },
     {
       resolve: 'gatsby-plugin-favicon',
       options: {

package.json

@@ -10,13 +10,14 @@
     "lint:js": "eslint ./gatsby-*.{js,jsx} && eslint ./src/**/*.{js,jsx}",
     "lint:css": "stylelint ./src/**/*.{css,scss}",
     "lint": "npm run lint:js && npm run lint:css",
-    "build": "./node_modules/gatsby/dist/bin/gatsby.js build",
+    "build": "npm run svg && ./node_modules/gatsby/dist/bin/gatsby.js build",
-    "start": "./node_modules/gatsby/dist/bin/gatsby.js develop",
+    "start": "npm run svg && ./node_modules/gatsby/dist/bin/gatsby.js develop",
     "format": "prettier --write 'src/**/*.{js,jsx}'",
     "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
     "test": "npm run lint",
     "deploy": "./scripts/deploy.sh",
-    "new": "node ./scripts/new-project.js"
+    "new": "node ./scripts/new-project.js",
+    "svg": "./scripts/svg.sh"
   },
   "dependencies": {
     "camel-case": "^3.0.0",
@@ -31,7 +32,6 @@
     "gatsby-plugin-sass": "next",
     "gatsby-plugin-sharp": "next",
     "gatsby-plugin-sitemap": "next",
-    "gatsby-plugin-svgr": "github:plag/gatsby-plugin-svgr#gatsby2-compatibility",
     "gatsby-source-filesystem": "next",
     "gatsby-transformer-json": "next",
     "gatsby-transformer-sharp": "next",
@@ -49,6 +49,7 @@
     "vcf": "^2.0.1"
   },
   "devDependencies": {
+    "@svgr/cli": "^2.0.0",
     "babel-eslint": "^8.2.3",
     "eslint": "^5.0.0",
     "eslint-config-prettier": "^2.9.0",

scripts/svg.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -e
+
+SRC='./src/images'
+OUT='./src/components/svg'
+
+# Usage: svgr [-d out-dir] [src-dir]
+./node_modules/@svgr/cli/bin/svgr --icon -d $OUT $SRC

src/components/atoms/LogoUnit.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-// import { ReactComponent as Logo } from '../../images/logo.svg'
+import Logo from '../svg/Logo'
 import styles from './LogoUnit.module.scss'
 
 const LogoUnit = ({ meta, minimal }) => {
@@ -10,7 +10,7 @@ const LogoUnit = ({ meta, minimal }) => {
 
   return (
     <div className={classes}>
-      {/* <Logo className={styles.logounit__logo} /> */}
+      <Logo className={styles.logounit__logo} />
       <h1 className={styles.logounit__title}>{meta.title.toLowerCase()}</h1>
       <p className={styles.logounit__description}>
         <span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span>

src/components/molecules/Networks.jsx

@@ -2,31 +2,31 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { FadeIn } from '../atoms/Animations'
 
-// import { ReactComponent as Email } from '../../images/email.svg'
+import Email from '../svg/Email'
-// import { ReactComponent as Blog } from '../../images/blog.svg'
+import Blog from '../svg/Blog'
-// import { ReactComponent as Twitter } from '../../images/twitter.svg'
+import Twitter from '../svg/Twitter'
-// import { ReactComponent as GitHub } from '../../images/github.svg'
+import GitHub from '../svg/Github'
-// import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
+import Dribbble from '../svg/Dribbble'
 
-// import icons from '../atoms/Icons.module.scss'
+import icons from '../atoms/Icons.module.scss'
 import styles from './Networks.module.scss'
 
-// const NetworkIcon = props => {
+const NetworkIcon = props => {
-//   switch (props.title) {
+  switch (props.title) {
-//     case 'Email':
+    case 'Email':
-//       return <Email {...props} />
+      return <Email {...props} />
-//     case 'Blog':
+    case 'Blog':
-//       return <Blog {...props} />
+      return <Blog {...props} />
-//     case 'Twitter':
+    case 'Twitter':
-//       return <Twitter {...props} />
+      return <Twitter {...props} />
-//     case 'GitHub':
+    case 'GitHub':
-//       return <GitHub {...props} />
+      return <GitHub {...props} />
-//     case 'Dribbble':
+    case 'Dribbble':
-//       return <Dribbble {...props} />
+      return <Dribbble {...props} />
-//     default:
+    default:
-//       return null
+      return null
-//   }
+  }
-// }
+}
 
 class Network extends PureComponent {
   constructor(props) {
@@ -64,7 +64,7 @@ class Network extends PureComponent {
                 href={this.props.meta.social[key]}
                 key={i}
               >
-                {/* <NetworkIcon title={key} className={icons.icon} /> */}
+                <NetworkIcon title={key} className={icons.icon} />
                 <span className={styles.title}>{key}</span>
               </a>
             ))}

src/components/molecules/ProjectLinks.jsx

@@ -1,34 +1,34 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-// import { ReactComponent as Link } from '../../images/link.svg'
+import Link from '../svg/Link'
-// import { ReactComponent as Download } from '../../images/download.svg'
+import Download from '../svg/Download'
-// import { ReactComponent as Info } from '../../images/info.svg'
+import Info from '../svg/Info'
-// import { ReactComponent as Styleguide } from '../../images/styleguide.svg'
+import Styleguide from '../svg/Styleguide'
-// import { ReactComponent as GitHub } from '../../images/github.svg'
+import GitHub from '../svg/Github'
-// import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
+import Dribbble from '../svg/Dribbble'
 
-// import icons from '../atoms/Icons.module.scss'
+import icons from '../atoms/Icons.module.scss'
 import styles from './ProjectLinks.module.scss'
 
-// const LinkIcon = props => {
+const LinkIcon = props => {
-//   switch (props.title) {
+  switch (props.title) {
-//     case 'Link':
+    case 'Link':
-//       return <Link {...props} />
+      return <Link {...props} />
-//     case 'GitHub':
+    case 'GitHub':
-//       return <GitHub {...props} />
+      return <GitHub {...props} />
-//     case 'Dribbble':
+    case 'Dribbble':
-//       return <Dribbble {...props} />
+      return <Dribbble {...props} />
-//     case 'Info':
+    case 'Info':
-//       return <Info {...props} />
+      return <Info {...props} />
-//     case 'Download':
+    case 'Download':
-//       return <Download {...props} />
+      return <Download {...props} />
-//     case 'Styleguide':
+    case 'Styleguide':
-//       return <Styleguide {...props} />
+      return <Styleguide {...props} />
-//     default:
+    default:
-//       return null
+      return null
-//   }
+  }
-// }
+}
 
 const ProjectLinks = ({ links }) => (
   <div className={styles.projectLinks}>
@@ -43,7 +43,7 @@ const ProjectLinks = ({ links }) => (
         return (
           <li key={title}>
             <a href={url}>
-              {/* <LinkIcon title={title} className={icons.icon} /> */}
+              <LinkIcon title={title} className={icons.icon} />
               {title}
             </a>
           </li>

src/components/molecules/ThemeSwitch.jsx

@@ -2,20 +2,20 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import { FadeIn } from '../atoms/Animations'
-// import { ReactComponent as Day } from '../../images/day.svg'
+import Day from '../svg/Day'
-// import { ReactComponent as Night } from '../../images/night.svg'
+import Night from '../svg/Night'
 import styles from './ThemeSwitch.module.scss'
 
-const ThemeToggle = () => {
+const ThemeToggle = props => {
   return (
     <span
       id="toggle"
       className={styles.checkboxContainer}
       aria-live="assertive"
     >
-      {/* <Day className={props.dark ? null : 'active'} /> */}
+      <Day className={props.dark ? null : 'active'} />
       <span className={styles.checkboxFake} />
-      {/* <Night className={props.dark ? 'active' : null} /> */}
+      <Night className={props.dark ? 'active' : null} />
     </span>
   )
 }