diff --git a/README.md b/README.md index 8b01364..36538a3 100644 --- a/README.md +++ b/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) + +``` ### 🍬 Typekit component diff --git a/gatsby-config.js b/gatsby-config.js index 47eb03d..fadf564 100644 --- a/gatsby-config.js +++ b/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: { diff --git a/package.json b/package.json index 606d22c..df768da 100644 --- a/package.json +++ b/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", diff --git a/src/components/molecules/LogoUnit.jsx b/src/components/molecules/LogoUnit.jsx index 412c3fd..f248237 100644 --- a/src/components/molecules/LogoUnit.jsx +++ b/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` diff --git a/src/components/molecules/Networks.jsx b/src/components/molecules/Networks.jsx index d37473a..f40bc42 100644 --- a/src/components/molecules/Networks.jsx +++ b/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' diff --git a/src/components/molecules/ProjectLinks.jsx b/src/components/molecules/ProjectLinks.jsx index 1e1fafe..93ec930 100644 --- a/src/components/molecules/ProjectLinks.jsx +++ b/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' diff --git a/src/components/molecules/ThemeSwitch.jsx b/src/components/molecules/ThemeSwitch.jsx index 39fc764..5630a10 100644 --- a/src/components/molecules/ThemeSwitch.jsx +++ b/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)