Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-plugin-svgr npm version

SVGR plugin for Gatsby

Note: The master branch contains the Gatsbyjs V2 compatible version of this plugin. Work on the Gatsbyjs v1 compatible version is on-going in the v1 branch.

Installing

As of v2.0, SVGR is declared as a peer dependency. You will need to add gatsby-plugin-svgr as well as @svgr/webpack to your dependencies.

$ npm install @svgr/webpack gatsby-plugin-svgr

or

$ yarn add @svgr/webpack gatsby-plugin-svgr

Setup

Add it to your gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-plugin-svgr',
  ],
}

Options

Any options you configure gatsby-plugin-svgr with will be passed on to svgr with the exception of include and exclude (see below). You can see a full list of SVGR options here (you want the API override version). SVGR uses SVGO to optimize SVGs; you can configure SVGO using svgoConfig; see SVGO for a full list of configuration options.

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-svgr',
      options: {
        prettier: true,         // use prettier to format JS code output (default)
        svgo: true,             // use svgo to optimize SVGs (default)
        svgoConfig: {
          removeViewBox: true, // remove viewBox when possible (default)
          cleanupIDs: true,    // remove unused IDs and minify remaining IDs (default)
        },
      },
    },
  ],
}

Note: SVGO does not produce unique IDs when using the cleanupIDs option; if you’re using SVGs that rely on IDs (e.g. to target template elements with use) and include multiple SVGs on the same page you may wish to disable the cleanupIDs option to prevent conflicts. Alternately you can disable svgo altogether and perform any optimization either manually or through another build process.

Applying SVGR to only some resources

By default, SVGR is only used to load resources when loaded via JS (i.e. your stylesheets will fallback to the default loader). If you only want to apply SVGR to some resources, or you want to exclude some resources, you can pass include or exclude as options. These are passed directly to the SVGR loader as Conditions.

{
  resolve: 'gatsby-plugin-svgr',
  options: {
    exclude: /some_special_folder/,
  },
}

Usage

import starUrl, { ReactComponent as Star } from './star.svg'

const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)