gatsby-plugin-svgr-loader []

gatsby-plugin-react-svg equivalent but using @svgr/webpack instead.

Adds @svgr/webpack to gatsby webpack config.

Note: the plugin can remove SVGs from the built-in url-loader config in case invalid configuration.

Install

npm install --save gatsby-plugin-svgr-loader

How to use

// In your gatsby-config.js

plugins: [
  {
    resolve: "gatsby-plugin-svgr-loader",
    options: {
      rule: {
        include: /assets/ // See below to configure properly
      }
    }
  }
];

Configuration

The rule plugin option can be used to pass rule options. If either include or exclude options are present, @svgr/webpack will use them and url-loader will be re-enabled with the inverse.

The following configuration uses @svgr/webpack to process SVGs from a path matching /assets/, and url-loader to process SVGs from everywhere else.

{
    resolve: 'gatsby-plugin-svgr-loader',
    options: {
        rule: {
          include: /assets/
        }
    }
}

From now on you can import SVGs and use them as Components:

import Icon from "./path/assets/icon.svg";

// ...

<Icon />;

Another common configuration:

• name SVGs used in React components like something.inline.svg and process them with @svgr/webpack
• name other SVGs (e.g. used in css/scss) something.svg and process them with the default url-loader

{
    resolve: 'gatsby-plugin-svgr-loader',
    options: {
        rule: {
          include: /\.inline\.svg$/
        }
    }
}

In React components:

import Something from "./path/something.inline.svg";

// ...

<Something />;

In styles file:

.header-background {
  background-image: url(./path/something.svg);
}