switch to gatsby-plugin-svgr

gatsby-config.js

@@ -78,6 +78,12 @@ module.exports = {
         includePaths: [`${__dirname}/node_modules`, `${__dirname}/src/styles`]
       }
     },
+    {
+      resolve: 'gatsby-plugin-svgr',
+      options: {
+        icon: true
+      }
+    },
     {
       resolve: 'gatsby-plugin-lunr',
       options: {

package.json

@@ -7,14 +7,14 @@
   "license": "MIT",
   "main": "index.js",
   "scripts": {
-    "start": "npm run svg && gatsby develop",
-    "build": "npm run svg && gatsby build",
+    "start": "gatsby develop",
+    "build": "gatsby build",
     "format": "prettier --write 'src/**/*.{js,jsx}'",
     "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
     "lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.jsx",
     "lint:css": "stylelint ./src/**/*.{css,scss}",
     "lint:md": "markdownlint ./content/posts/**/*.md && markdownlint ./README.md",
-    "lint": "npm run svg && npm run lint:md && npm run lint:js && npm run lint:css",
+    "lint": "npm run lint:md && npm run lint:js && npm run lint:css",
     "test": "npm run lint",
     "deploy": "./scripts/deploy.sh",
     "svg": "./scripts/svg.sh",
@@ -39,6 +39,7 @@
     "gatsby-plugin-sass": "^2.0.1",
     "gatsby-plugin-sharp": "^2.0.5",
     "gatsby-plugin-sitemap": "^2.0.1",
+    "gatsby-plugin-svgr": "^2.0.0-alpha",
     "gatsby-redirect-from": "^0.1.1",
     "gatsby-remark-autolink-headers": "^2.0.6",
     "gatsby-remark-copy-linked-files": "^2.0.5",
@@ -69,7 +70,6 @@
   "devDependencies": {
     "@babel/node": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
-    "@svgr/cli": "^2.4.1",
     "babel-eslint": "^9.0.0",
     "eslint": "^5.6.0",
     "eslint-config-prettier": "^3.1.0",

scripts/svg.sh

@@ -1,12 +0,0 @@
-#!/usr/bin/env bash
-set -e
-
-SRC='./src/images'
-OUT='./src/components/svg'
-
-printf "Creating SVG components...\\n\\n"
-
-# Usage: svgr [-d out-dir] [src-dir]
-./node_modules/@svgr/cli/bin/svgr --icon -d $OUT $SRC
-
-printf "\\n🎉 Successfully created SVG components\\n\\n"

src/components/atoms/PostActions.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import ModalThanks from '../molecules/ModalThanks'
 import styles from './PostActions.module.scss'
 
-import Twitter from '../svg/Twitter'
-import Bitcoin from '../svg/Bitcoin'
+import { ReactComponent as Twitter } from '../../images/twitter.svg'
+import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
 
 export default class PostActions extends PureComponent {
   state = {

src/components/atoms/PostLinkActions.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
-import Forward from '../svg/Forward'
-import Infinity from '../svg/Infinity'
+import { ReactComponent as Forward } from '../../images/forward.svg'
+import { ReactComponent as Infinity } from '../../images/infinity.svg'
 import styles from './PostLinkActions.module.scss'
 import stylesPostMore from './PostMore.module.scss'
 

src/components/atoms/PostMore.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import styles from './PostMore.module.scss'
-import Caret from '../svg/ChevronRight'
+import { ReactComponent as Caret } from '../../images/chevron-right.svg'
 
 const PostMore = ({ to, children }) => (
   <Link className={styles.postMore} to={to}>

src/components/atoms/PostTitle.jsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
-import Forward from '../svg/Forward'
+import { ReactComponent as Forward } from '../../images/forward.svg'
 import styles from './PostTitle.module.scss'
 
 const PostTitle = ({ type, slug, linkurl, title }) => {

src/components/atoms/SearchButton.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import SearchIcon from '../svg/MagnifyingGlass'
+import { ReactComponent as SearchIcon } from '../../images/magnifying-glass.svg'
 import styles from './SearchButton.module.scss'
 
 const SearchButton = props => (

src/components/molecules/IconLinks.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './IconLinks.module.scss'
 
-import Twitter from '../svg/Twitter'
-import Github from '../svg/Github'
-import Facebook from '../svg/Facebook'
-import Rss from '../svg/Rss'
-import Jsonfeed from '../svg/Jsonfeed'
+import { ReactComponent as Twitter } from '../../images/twitter.svg'
+import { ReactComponent as Github } from '../../images/github.svg'
+import { ReactComponent as Facebook } from '../../images/facebook.svg'
+import { ReactComponent as Rss } from '../../images/rss.svg'
+import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
 
 const NetworkIcon = ({ link }) => {
   let Icon

src/components/molecules/ModalThanks.jsx

@@ -4,7 +4,7 @@ import { QRCode } from 'react-qr-svg'
 import Clipboard from 'react-clipboard.js'
 
 import Modal from '../atoms/Modal'
-import IconClipboard from '../svg/Clipboard'
+import { ReactComponent as IconClipboard } from '../../images/clipboard.svg'
 import styles from './ModalThanks.module.scss'
 
 const query = graphql`

src/components/organisms/Footer.jsx

@@ -6,8 +6,8 @@ import Vcard from '../molecules/Vcard'
 import Subscribe from '../molecules/Subscribe'
 import ModalThanks from '../molecules/ModalThanks'
 
-import Github from '../svg/Github'
-import Bitcoin from '../svg/Bitcoin'
+import { ReactComponent as Github } from '../../images/github.svg'
+import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
 
 import styles from './Footer.module.scss'