switch back to gatsby-plugin-svgr

README.md

@@ -87,13 +87,13 @@ All project images use one single component defined in [`src/components/molecule
 
 ### 💎 Importing SVG assets
 
-All SVG assets under `src/images/` will be converted to React components before every build. Makes use of `SVGR` so SVG assets can be imported like so:
+All SVG assets under `src/images/` will be converted to React components with the help of [gatsby-plugin-svgr](https://github.com/zabute/gatsby-plugin-svgr). Makes use of [SVGR](https://github.com/smooth-code/svgr) so SVG assets can be imported like so:
 
 ```js
-import Logo from './components/svg/Logo'
-```
+import { ReactComponent as Logo } from './components/svg/Logo'
 
-That's done with a simple bash script under [`scripts/svg.sh`](scripts/svg.sh)
+<Logo />
+```
 
 ### 🍬 Typekit component
 

gatsby-config.js

@@ -50,6 +50,12 @@ module.exports = {
         path: path.join(__dirname, 'src', 'images')
       }
     },
+    {
+      resolve: 'gatsby-plugin-svgr',
+      options: {
+        icon: true
+      }
+    },
     {
       resolve: 'gatsby-plugin-matomo',
       options: {

package.json

@@ -10,15 +10,14 @@
     "start": "npm run dev",
     "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.{js,jsx}",
     "lint:css": "stylelint ./src/**/*.{css,scss}",
-    "lint": "npm run svg && npm run lint:js && npm run lint:css",
-    "build": "npm run svg && ./node_modules/gatsby/dist/bin/gatsby.js build",
-    "dev": "npm run svg && ./node_modules/gatsby/dist/bin/gatsby.js develop",
+    "lint": "npm run lint:js && npm run lint:css",
+    "build": "./node_modules/gatsby/dist/bin/gatsby.js build",
+    "dev": "./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 && ./node_modules/.bin/ava **/*.test.js --verbose",
     "deploy": "./scripts/deploy.sh",
-    "new": "node ./scripts/new.js",
-    "svg": "./scripts/svg.sh"
+    "new": "node ./scripts/new.js"
   },
   "dependencies": {
     "file-saver": "^1.3.8",
@@ -31,6 +30,7 @@
     "gatsby-plugin-sass": "^2.0.0",
     "gatsby-plugin-sharp": "^2.0.0",
     "gatsby-plugin-sitemap": "^2.0.0",
+    "gatsby-plugin-svgr": "next",
     "gatsby-source-filesystem": "^2.0.1",
     "gatsby-transformer-json": "^2.1.1",
     "gatsby-transformer-sharp": "^2.1.1",
@@ -48,7 +48,6 @@
     "vcf": "^2.0.1"
   },
   "devDependencies": {
-    "@svgr/cli": "^2.4.1",
     "ava": "^0.25.0",
     "babel-eslint": "^9.0.0",
     "chrome-launcher": "^0.10.4",

src/components/molecules/LogoUnit.jsx

@@ -4,7 +4,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import posed from 'react-pose'
 import { moveInBottom } from '../atoms/Transitions'
 
-import Logo from '../svg/Logo'
+import { ReactComponent as Logo } from '../../images/logo.svg'
 import styles from './LogoUnit.module.scss'
 
 const query = graphql`

src/components/molecules/Networks.jsx

@@ -4,11 +4,11 @@ import { StaticQuery, graphql } from 'gatsby'
 import posed from 'react-pose'
 import { moveInTop } from '../atoms/Transitions'
 
-import Email from '../svg/Email'
-import Blog from '../svg/Blog'
-import Twitter from '../svg/Twitter'
-import GitHub from '../svg/Github'
-import Dribbble from '../svg/Dribbble'
+import { ReactComponent as Email } from '../../images/email.svg'
+import { ReactComponent as Blog } from '../../images/blog.svg'
+import { ReactComponent as Twitter } from '../../images/twitter.svg'
+import { ReactComponent as GitHub } from '../../images/github.svg'
+import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
 
 import icons from '../atoms/Icons.module.scss'
 import styles from './Networks.module.scss'

src/components/molecules/ProjectLinks.jsx

@@ -2,12 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Button from '../atoms/Button'
-import Link from '../svg/Link'
-import Download from '../svg/Download'
-import Info from '../svg/Info'
-import Styleguide from '../svg/Styleguide'
-import GitHub from '../svg/Github'
-import Dribbble from '../svg/Dribbble'
+import { ReactComponent as Link } from '../../images/link.svg'
+import { ReactComponent as Download } from '../../images/download.svg'
+import { ReactComponent as Info } from '../../images/info.svg'
+import { ReactComponent as Styleguide } from '../../images/styleguide.svg'
+import { ReactComponent as GitHub } from '../../images/github.svg'
+import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
 
 import icons from '../atoms/Icons.module.scss'
 import styles from './ProjectLinks.module.scss'

src/components/molecules/ThemeSwitch.jsx

@@ -5,8 +5,8 @@ import posed from 'react-pose'
 import { Consumer } from '../../store/createContext'
 import { fadeIn } from '../atoms/Transitions'
 
-import Day from '../svg/Day'
-import Night from '../svg/Night'
+import { ReactComponent as Day } from '../../images/day.svg'
+import { ReactComponent as Night } from '../../images/night.svg'
 import styles from './ThemeSwitch.module.scss'
 
 const Animation = posed.aside(fadeIn)