Registry / web-framework / babel-plugin-react-svg

babel-plugin-react-svg

library3.0.3jsnpmunverified

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.

web-framework testing

npm install babel-plugin-react-svg

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-REACT

babel-plugin-react-svg

web-frameworkjavascriptv3.0.3

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.

default

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

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

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

babel-plugin-react-svg (in .babelrc/plugins)

✓ "plugins": ["babel-plugin-react-svg"]

✗ "plugins": ["react-svg"]

Plugin name must be the full npm package name.

Options (e.g., svgo, expandProps)

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

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

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

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;

Debug

Known issues

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

fix

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

affects: >=3.0.0

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

affects: >=3.0.0

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

affects: >=2.1.0

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

affects: >=3.0.0

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

affects: *

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

affects: *

Errors

Common errors & fixes

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

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'] }

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

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

fix

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

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

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

fix

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

Upgrade

Version history

3.0.3latest on npm

Audit

Dependencies

@babel/plugin-syntax-jsxrequiredPeer dependency required to parse JSX syntax in Babel transforms.

Agent activity

18 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/boopathi/react-svg-loader ↗

packagehttps://www.npmjs.com/package/babel-plugin-react-svg ↗