Registry / web-framework / gatsby-plugin-svgr-loader

gatsby-plugin-svgr-loader

library0.1.0jsnpmunverified

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.

web-framework

npm install gatsby-plugin-svgr-loader

github ↗package ↗

INSTALL

IMPORT

SIG · GATSBY-PLUGIN-SVGR

gatsby-plugin-svgr-loader

web-frameworkjavascriptv0.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

plugin in gatsby-config

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

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

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

React component from SVG

✓ import Icon from './assets/icon.svg';

✗ const Icon = require('./assets/icon.svg');

Default import works with SVGR; require may not work in all Gatsby setups.

Inline SVG pattern

✓ import Something from './path/something.inline.svg';

✗ import Something from './path/something.svg';

Use `.inline.svg` naming convention and corresponding include regex to avoid url-loader conflicts.

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;

Debug

Known issues

deprecatedPlugin 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.

affects: >=0.1.0

gotchaThe 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.

affects: >=0.1.0

gotchaSVGR 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.

affects: >=0.1.0

Errors

Common errors & fixes

Error: Cannot find module '@svgr/webpack'

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

fix

Run: npm install @svgr/webpack

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

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

fix

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

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

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.

Upgrade

Version history

0.1.0latest on npm

Audit

Dependencies

@svgr/webpackrequiredrequired for SVG transformation

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/matheusdsmartins/gatsby-plugin-svgr-loader ↗

packagehttps://www.npmjs.com/package/gatsby-plugin-svgr-loader ↗