From 3fa552016e4695981ce579f171253bd6b286057e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 21 Jul 2018 19:26:11 +0200
Subject: [PATCH] convert svgs to components

---
 .gitignore     |  1 +
 package.json   | 42 ++++++++++++++++++++++--------------------
 scripts/svg.sh | 12 ++++++++++++
 3 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100755 scripts/svg.sh

diff --git a/.gitignore b/.gitignore
index e4471032..1b4e9ac6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ yarn.lock
 package-lock.json
 public
 .cache
+src/components/svg
diff --git a/package.json b/package.json
index 20d00952..c66bb79e 100644
--- a/package.json
+++ b/package.json
@@ -7,15 +7,16 @@
   "license": "MIT",
   "main": "index.js",
   "scripts": {
-    "start": "gatsby develop",
-    "build": "gatsby build",
+    "start": "npm run svg && gatsby develop",
+    "build": "npm run svg && 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": "npm run lint:js && npm run lint:css",
+    "lint": "npm run svg && npm run lint:js && npm run lint:css",
     "test": "npm run lint",
-    "deploy": "./scripts/deploy.sh"
+    "deploy": "./scripts/deploy.sh",
+    "svg": "./scripts/svg.sh"
   },
   "browserslist": [
     "last 3 versions"
@@ -23,23 +24,23 @@
   "dependencies": {
     "clipboard": "^2.0.1",
     "exif-js": "^2.3.0",
-    "gatsby": "^2.0.0-beta.54",
-    "gatsby-image": "^2.0.0-beta.6",
-    "gatsby-plugin-catch-links": "^2.0.2-beta.3",
+    "gatsby": "^2.0.0-beta.55",
+    "gatsby-image": "^2.0.0-beta.7",
+    "gatsby-plugin-catch-links": "^2.0.2-beta.4",
     "gatsby-plugin-matomo": "^0.4.1",
-    "gatsby-plugin-react-helmet": "^3.0.0-beta.3",
-    "gatsby-plugin-sass": "^2.0.0-beta.5",
-    "gatsby-plugin-sharp": "^2.0.0-beta.6",
-    "gatsby-plugin-sitemap": "^2.0.0-beta.2",
-    "gatsby-remark-autolink-headers": "^2.0.0-beta.3",
-    "gatsby-remark-copy-linked-files": "^2.0.0-beta.2",
-    "gatsby-remark-images": "^2.0.1-beta.8",
-    "gatsby-remark-prismjs": "^3.0.0-beta.3",
-    "gatsby-remark-smartypants": "^2.0.0-beta.2",
-    "gatsby-source-filesystem": "^2.0.1-beta.8",
-    "gatsby-transformer-remark": "^2.1.1-beta.3",
-    "gatsby-transformer-sharp": "^2.1.1-beta.5",
-    "gatsby-transformer-yaml": "^2.1.1-beta.2",
+    "gatsby-plugin-react-helmet": "^3.0.0-beta.4",
+    "gatsby-plugin-sass": "^2.0.0-beta.6",
+    "gatsby-plugin-sharp": "^2.0.0-beta.7",
+    "gatsby-plugin-sitemap": "^2.0.0-beta.3",
+    "gatsby-remark-autolink-headers": "^2.0.0-beta.4",
+    "gatsby-remark-copy-linked-files": "^2.0.0-beta.3",
+    "gatsby-remark-images": "^2.0.1-beta.9",
+    "gatsby-remark-prismjs": "^3.0.0-beta.4",
+    "gatsby-remark-smartypants": "^2.0.0-beta.3",
+    "gatsby-source-filesystem": "^2.0.1-beta.9",
+    "gatsby-transformer-remark": "^2.1.1-beta.4",
+    "gatsby-transformer-sharp": "^2.1.1-beta.6",
+    "gatsby-transformer-yaml": "^2.1.1-beta.3",
     "graphql": "^0.13.2",
     "intersection-observer": "^0.5.0",
     "node-sass": "^4.9.2",
@@ -53,6 +54,7 @@
     "vex-js": "^4.1.0"
   },
   "devDependencies": {
+    "@svgr/cli": "^2.1.1",
     "babel-eslint": "^8.2.6",
     "eslint": "^5.2.0",
     "eslint-config-prettier": "^2.9.0",
diff --git a/scripts/svg.sh b/scripts/svg.sh
new file mode 100755
index 00000000..4eb422a8
--- /dev/null
+++ b/scripts/svg.sh
@@ -0,0 +1,12 @@
+#!/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"