svg-react-loader

0.4.6 verified Sat Apr 25 auth: no javascript maintenance

A Webpack loader that transforms SVG files into reusable React components. Current stable version is 0.4.6. Allows inline SVG usage as React components or composition of multiple SVGs. Supports query parameters for component naming, attribute mapping, CSS class prefixing, and custom filter functions. Does not require Babel for output (ES5-7 compatible). Works with React >=0.14. Key differentiators: supports SVG/XML string or object tree input, filter API for node modification, and works as both a loader and pre-loader.

Common errors

error Module not found: Error: Can't resolve 'svg-react-loader' in '/path/to/project' ↓

cause svg-react-loader not installed or not in devDependencies.

fix

Run npm install --save-dev svg-react-loader

error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. ↓

cause Webpack rule for .svg files is missing or loader not configured.

fix

Add a rule in webpack.config.js: { test: /\.svg$/, use: 'svg-react-loader' }

error React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. ↓

cause Import path missing loader prefix, so webpack returns undefined instead of a React component.

fix

Change import to include loader: import Icon from 'svg-react-loader!../svg/my-icon.svg';

error Cannot find module 'babel-core' ↓

cause Older version (<0.4.0) required Babel; newer versions don't but project may still use old version.

fix

Upgrade svg-react-loader to >=0.4.0: npm install svg-react-loader@latest

Warnings

breaking Requires React >=0.14 (stateless function component). ↓

fix Upgrade React to at least 0.14. For older React versions, use svg-react-loader@0.3.x.

breaking No longer requires Babel for transpilation; module returns ES5-7 compatible code. ↓

fix Ensure your webpack config does not expect Babel output from this loader. Adjust transpilation pipeline if needed.

gotcha Loader must be used with '!' in import path or configured in webpack module rules. ↓

fix Always prefix SVG imports with 'svg-react-loader?' or configure in webpack module.rules.

deprecated Webpack 1 style loaders array is deprecated; use module.rules instead. ↓

fix Use module.rules with 'use' and 'loader' options instead of 'loaders' array.

gotcha filter functions must call this.update() for changes to take effect. ↓

fix Always invoke this.update(value) inside filter functions after modifying the SVG object tree.

Install

npm install svg-react-loader

yarn add svg-react-loader

pnpm add svg-react-loader

Imports

default import
wrong
```
import Icon from '../svg/my-icon.svg';
```
correct
```
import Icon from 'svg-react-loader?name=Icon!../svg/my-icon.svg';
```
Loader syntax is required: 'svg-react-loader?params!filepath'. Without the loader prefix, webpack won't process the SVG.

CommonJS require

wrong

var Icon = require('../svg/my-icon.svg');

correct

var Icon = require('svg-react-loader?name=Icon!../svg/my-icon.svg');

Same as import, must include loader prefix in the require path.

webpack config loader
wrong
```
loader: 'svg-inline-loader'
```
correct
```
loader: 'svg-react-loader'
```
Use 'svg-react-loader' in webpack module rules. Other SVG loaders produce strings or URLs, not React components.

Quickstart

Configures webpack to load SVG files as React components, with a filter to remove fill attributes.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'svg-react-loader',
            options: {
              classIdPrefix: '[name]-[hash:8]__',
              filters: [
                function (value) {
                  // Remove fill attributes
                  if (value.attrs && value.attrs.fill) {
                    delete value.attrs.fill;
                  }
                  this.update(value);
                }
              ]
            }
          }
        ]
      }
    ]
  }
};

// MyComponent.js
import React from 'react';
import Icon from './my-icon.svg';

export default function MyComponent() {
  return <Icon className="my-icon" />;
}