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

babel-plugin-inline-react-svg

JSON →
library2.0.2jsnpmunverified

A Babel plugin (v2.0.2) that transforms SVG file imports into inline React components, using SVGO for optimization. Stable but infrequently updated (last release ~2019). Alternatives like @svgr/webpack are more actively maintained and support broader use cases. Requires @babel/core ^7.0.0 as a peer dependency. Works in Node.js >=10.13, not browser-native.

web-framework
npm install babel-plugin-inline-react-svg
github ↗package ↗
INSTALL
IMPORT
SIG · BABEL-PLUGIN-INLIN
B
babel-plugin-inline-react-svg
web-frameworkjavascriptv2.0.2
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

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

plugin
✓ import plugin from 'babel-plugin-inline-react-svg'
✗ const plugin = require('babel-plugin-inline-react-svg')
Default export; CommonJS require also works.
babel config
✓ plugins: ['inline-react-svg']
✗ plugins: ['babel-plugin-inline-react-svg']
In Babel config, use shorthand without prefix.
TypeScript
✓ import * as React from 'react'; import Icon from './icon.svg';
✗ import Icon from './icon.svg?inline';
No special query string needed; declaration file may be needed for TS.

Shows basic setup and usage: configuring the plugin in .babelrc and importing an SVG as a React component.

// .babelrc { "plugins": [ "inline-react-svg" ] } // App.js import React from 'react'; import CloseIcon from './close.svg'; function App() { return <CloseIcon />; } export default App;
Debug
Known issues
breakingv2.0.0 changed default SVG processing to include all SVGO plugins. Previously some plugins were disabled.
fix
If you relied on earlier behavior, configure svgo options explicitly to disable unwanted plugins.
affects: >=2.0.0
deprecatedThe svgo option 'extendDefaultPlugins' from svgo v1 is deprecated in svgo v2.
fix
Use the 'plugins' array directly; see SVGO documentation for v2 configuration.
affects: >=2.0.0
gotchaFile paths are case-sensitive by default on Linux; use caseSensitive option for cross-platform consistency.
fix
Set caseSensitive: true in plugin options to enforce case sensitivity on all platforms.
affects: >=1.0.0
gotchaThe plugin only works with Babel 7 (peer dep @babel/core ^7.0.0). Not compatible with Babel 6.
fix
Upgrade to Babel 7 or use version 1.x of the plugin.
affects: >=2.0.0
Errors
Common errors & fixes
Cannot find module 'babel-plugin-inline-react-svg'
Plugin not installed or missing from devDependencies.
fix
npm install --save-dev babel-plugin-inline-react-svg
TypeError: (0 , _plugin.default) is not a function
Using CommonJS require() incorrectly when plugin expects default export.
fix
Use import or const plugin = require('babel-plugin-inline-react-svg').default;
Upgrade
Version history
2.0.2latest on npm
Audit
Dependencies
@babel/corerequiredPeer dependency required for Babel plugin execution
Agent activity
14 hits · last 30 days
node
10
OpenAI (training)
1
Resources
githubhttps://github.com/kesne/babel-plugin-inline-react-svg ↗
packagehttps://www.npmjs.com/package/babel-plugin-inline-react-svg ↗
babel-plugin-inline-react-svg — npm install babel-plugin-inline-react-svg · libregistry