3.0.0-beta.0 • Public • Published

gatsby-plugin-svgr npm version

SVGR plugin for Gatsby v2.0+. Still rocking Gatsby v1? See the v1 branch instead.


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


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


Add it to your gatsby-config.js

module.exports = {
  plugins: [


Note: If you need to configure SVGO, we recommended this approach instead of the below. Documentation update to follow.

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: {
          plugins: [
            { 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/,


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

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

Package Sidebar


npm i gatsby-plugin-svgr

Weekly Downloads






Unpacked Size

6.96 kB

Total Files


Last publish


  • zabute
  • coreyward