SVGR

[arcticicestudio]

This issue documents the integration of SVGR which transforms SVG into ready to use React components. It is part of create-react-app and makes SVG integration into React projects easy.

Configuration

All configurations will be placed in a svgr.config.js file in the project root instead of passing them to the corresponding Gatsby plugin for the Webpack loader that is documented in the section below.

• expandProps = end — ensure props are always spread ({...props}) last on the root <svg> element.
• ext = jsx — use the JSX file extension for generated components.
• icon = false — ensure the width and height props (hardcoded 1em value) are not added.
• ref = true — export components using React's forwardRef API to reference the underlying component and allow access to the root SVG element which is necessary for animations.
• svgo = false — all SVG files in this project are already optimized with SVGO using the included .svgo.yml configuration.

Webpack Loader

To directly import SVG's as React component the @svgr/webpack package will be used to simply integrate SVGR as Webpack plugin. It'll be added through the gatsby-plugin-svgr which adjusts the required Webpack configurations by adding the loader and removing the default .svg file loader.

Tasks

• Install the required (dev) dependencies:
  • gatsby-plugin-svgr
  • @svgr/webpack
• Implement the SVGR and SVGO configuration files.
• Add gatsby-plugin-svgr to the Gatsby configuration.