From 6c8dc9855fc32bbb4dc1c5000e232dd0d7f8059a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 24 Sep 2018 22:28:07 +0200 Subject: [PATCH] switch to gatsby-plugin-svgr --- gatsby-config.js | 6 ++++++ package.json | 8 ++++---- scripts/svg.sh | 12 ------------ src/components/atoms/PostActions.jsx | 4 ++-- src/components/atoms/PostLinkActions.jsx | 4 ++-- src/components/atoms/PostMore.jsx | 2 +- src/components/atoms/PostTitle.jsx | 2 +- src/components/atoms/SearchButton.jsx | 2 +- src/components/molecules/IconLinks.jsx | 10 +++++----- src/components/molecules/ModalThanks.jsx | 2 +- src/components/organisms/Footer.jsx | 4 ++-- 11 files changed, 25 insertions(+), 31 deletions(-) delete mode 100755 scripts/svg.sh diff --git a/gatsby-config.js b/gatsby-config.js index b4c84f78..eb917eef 100644 --- a/gatsby-config.js +++ b/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: { diff --git a/package.json b/package.json index 1b9eb159..46cac1aa 100644 --- a/package.json +++ b/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", diff --git a/scripts/svg.sh b/scripts/svg.sh deleted file mode 100755 index 4eb422a8..00000000 --- a/scripts/svg.sh +++ /dev/null @@ -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" diff --git a/src/components/atoms/PostActions.jsx b/src/components/atoms/PostActions.jsx index 68bfa23f..c1f10b44 100644 --- a/src/components/atoms/PostActions.jsx +++ b/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 = { diff --git a/src/components/atoms/PostLinkActions.jsx b/src/components/atoms/PostLinkActions.jsx index 55a1e077..9727af9a 100644 --- a/src/components/atoms/PostLinkActions.jsx +++ b/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' diff --git a/src/components/atoms/PostMore.jsx b/src/components/atoms/PostMore.jsx index 730a3d60..8cc84ed6 100644 --- a/src/components/atoms/PostMore.jsx +++ b/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 }) => ( diff --git a/src/components/atoms/PostTitle.jsx b/src/components/atoms/PostTitle.jsx index 1185ddea..27d7a715 100644 --- a/src/components/atoms/PostTitle.jsx +++ b/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 }) => { diff --git a/src/components/atoms/SearchButton.jsx b/src/components/atoms/SearchButton.jsx index 5cd78c80..baf8062c 100644 --- a/src/components/atoms/SearchButton.jsx +++ b/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 => ( diff --git a/src/components/molecules/IconLinks.jsx b/src/components/molecules/IconLinks.jsx index 8c8c2bdd..99488a2e 100644 --- a/src/components/molecules/IconLinks.jsx +++ b/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 diff --git a/src/components/molecules/ModalThanks.jsx b/src/components/molecules/ModalThanks.jsx index 3d94da2d..56a1ca2d 100644 --- a/src/components/molecules/ModalThanks.jsx +++ b/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` diff --git a/src/components/organisms/Footer.jsx b/src/components/organisms/Footer.jsx index 3327ac2b..f73e7f6a 100644 --- a/src/components/organisms/Footer.jsx +++ b/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'