gatsby-plugin-svgr-loader

0.1.0 verified Sat Apr 25 auth: no javascript maintenance

A Gatsby plugin that integrates @svgr/webpack to allow importing SVG files as React components. Stable version 0.1.0, last updated in 2019, no recent releases. It replaces gatsby-plugin-react-svg with a different underlying SVGR implementation. Supports rule-based include/exclude to control which SVGs are processed by SVGR vs url-loader. Minimal configuration needed. Not actively maintained, but functional for compatible Gatsby versions.

Common errors

error Error: Cannot find module '@svgr/webpack' ↓

cause @svgr/webpack not installed; it's a peer dependency not auto-installed.

fix

Run: npm install @svgr/webpack

error Error: [gatsby-plugin-svgr-loader] `rule` option must be an object with `include` or `exclude`. ↓

cause Options passed incorrectly, e.g., `include` at top level instead of inside `rule`.

fix

Use: options: { rule: { include: /regex/ } }

error (Webpack) Module parse failed: Unexpected token on SVG file ↓

cause SVG file is being processed by multiple loaders; plugin didn't exclude it from url-loader properly.

fix

Ensure rule.include or rule.exclude is set correctly to avoid conflicts.

Warnings

deprecated Plugin no longer maintained; may not work with Gatsby v3+ due to webpack config changes. ↓

fix Consider using gatsby-plugin-react-svg or manual SVGR configuration.

gotcha The plugin removes SVGs from url-loader's default config for matched patterns; may break SVG imports in CSS if not carefully configured. ↓

fix Always provide either `include` or `exclude` rule to control which SVGs go to SVGR.

gotcha SVGR version mismatch can cause silent failures or bundle size bloat if @svgr/webpack version conflicts with Gatsby's dependencies. ↓

fix Pin @svgr/webpack to a version compatible with your Gatsby setup.

Install

npm install gatsby-plugin-svgr-loader

yarn add gatsby-plugin-svgr-loader

pnpm add gatsby-plugin-svgr-loader

Imports

plugin in gatsby-config

wrong

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

correct

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

Options must be wrapped in a `rule` object; `include` cannot be at top level.

React component from SVG
wrong
```
const Icon = require('./assets/icon.svg');
```
correct
```
import Icon from './assets/icon.svg';
```
Default import works with SVGR; require may not work in all Gatsby setups.
Inline SVG pattern
wrong
```
import Something from './path/something.svg';
```
correct
```
import Something from './path/something.inline.svg';
```
Use `.inline.svg` naming convention and corresponding include regex to avoid url-loader conflicts.

Quickstart

Configures the plugin to treat .inline.svg files as React components via SVGR, while other SVGs remain handled by url-loader.

// Install
npm install gatsby-plugin-svgr-loader

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-svgr-loader',
      options: {
        rule: {
          include: /\.inline\.svg$/
        }
      }
    }
  ]
}

// In a React component
import React from 'react';
import InlineIcon from './assets/icon.inline.svg';

const App = () => <InlineIcon />;
export default App;