babel-plugin-react-svg

3.0.3 verified Sat Apr 25 auth: no javascript maintenance

Babel plugin that transforms SVG files into React components. Version 3.0.3 is the current stable release, with no active development since 2019. It works by running SVGO optimization followed by a Babel transform to produce a component that renders the SVG as JSX. Key differentiators: integrates with webpack via react-svg-loader, supports SVGO options, and outputs functional components. Alternatives like @svgr/webpack offer more features and are actively maintained.

Common errors

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Webpack is trying to process the .svg file without the react-svg-loader or babel-plugin-react-svg configured.

fix

Add react-svg-loader to webpack rules: { test: /\.svg$/, use: ['babel-loader', 'react-svg-loader'] }

error Cannot find module '@babel/plugin-syntax-jsx' ↓

cause Missing peer dependency @babel/plugin-syntax-jsx.

fix

npm install @babel/plugin-syntax-jsx --save-dev

error Unknown option: expandProps. Check if it's written correctly. ↓

cause Options passed to the plugin in .babelrc are not recognized.

fix

Use valid options: { svgo: boolean, expandProps: 'start'|'end'|false }

Warnings

deprecated This package is no longer actively maintained. Consider using @svgr/webpack for new projects. ↓

fix Migrate to @svgr/webpack (see svgr.io).

breaking In v3.0.0, Node <8 is no longer supported. The plugin changed from class component output to functional component output in v2.0.0. ↓

fix Update Node.js to version >=8. For class component output, downgrade to v1.x.

gotcha SVGO object is mutated during transform. Multiple runs on same file may produce inconsistent results. ↓

fix Avoid reusing the same SVGO instance across multiple files; plugin handles this internally now.

deprecated Babel 6 support was dropped in v3.0.0. Use v2.x if you need Babel 6. ↓

fix Upgrade to Babel 7 or pin to babel-plugin-react-svg@^2.1.0.

gotcha The plugin expects .svg files to be imported as React components. If you are also using file-loader, ensure order of loaders in webpack. ↓

fix Use react-svg-loader webpack loader instead of configuring manually.

gotcha Import path must end with .svg; other file extensions are ignored. ↓

fix Ensure your SVG files have the .svg extension and are imported with correct path.

Install

npm install babel-plugin-react-svg

yarn add babel-plugin-react-svg

pnpm add babel-plugin-react-svg

Imports

default

wrong

const plugin = require('babel-plugin-react-svg').default

correct

import plugin from 'babel-plugin-react-svg'

ESM default export; in CommonJS, use `require('babel-plugin-react-svg')` directly.

babel-plugin-react-svg (in .babelrc/plugins)
wrong
```
"plugins": ["react-svg"]
```
correct
```
"plugins": ["babel-plugin-react-svg"]
```
Plugin name must be the full npm package name.

Options (e.g., svgo, expandProps)

wrong

["babel-plugin-react-svg", { "svgo": { "plugins": [] } }]

correct

["babel-plugin-react-svg", { "svgo": true, "expandProps": "start" }]

SVGO options are passed as an object; see SVGO docs for valid options.

Quickstart

Shows Babel plugin configuration and how to import an SVG as a React component.

// .babelrc
{
  "presets": ["@babel/preset-react"],
  "plugins": [
    ["babel-plugin-react-svg", {
      "svgo": true,
      "expandProps": "end"
    }]
  ]
}

// In your React component
import React from 'react';
import MyIcon from './icon.svg';

function App() {
  return <MyIcon style={{ width: 100, height: 100 }} />;
}

export default App;