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

babel-plugin-inline-svg

library1.2.0jsnpmunverified

A Babel plugin (v1.2.0) that transforms SVG imports into inline SVG strings, optimized with SVGO and with optional ID namespacing to avoid conflicts. Supports exporting as data URI for direct use in src attributes. Key differentiators: built-in SVGO optimization, automatic ID namespacing, and data URI export. Alternatives like svg-inline-loader or @svgr/webpack require more configuration.

web-framework

npm install babel-plugin-inline-svg

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-INLIN

babel-plugin-inline-svg

web-frameworkjavascriptv1.2.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.

default (import)

✓ import someSvg from './file.svg';

✗ const someSvg = require('./file.svg');

Default import yields a string. CommonJS require() will not work without additional configuration.

default (require)

✓ const someSvg = require('./file.svg').default;

✗ const someSvg = require('./file.svg');

When using require(), access .default to get the string.

type

✓ // No separate type import; the string is the type.

The plugin does not provide TypeScript types; declare module '*.svg' { const content: string; export default content; }.

Configure babel-plugin-inline-svg to ignore 'icons' files, disable ID namespacing, and export SVG as data URI.

// .babelrc { "plugins": [ ["inline-svg", { "ignorePattern": "icons", "disableNamespaceIds": true, "exportDataURI": true, "svgo": { "plugins": [{"removeDimensions": true}] } }] ] } // src/App.js import logo from './logo.svg'; function App() { return <img src={logo} alt="Logo" />; }

Debug

Known issues

gotchaSVG import is a string, not a React component. Using dangerouslySetInnerHTML or <img> src is required.

fix

If you need a React component, consider using @svgr/webpack instead.

affects: >=1.0.0

deprecatedIn v1.2.0, the argument order for namespaceIds transformer changed to standardize.

fix

Update custom transformers that rely on the old argument order.

affects: >=1.2.0

gotchaDisabling SVGO (disableSVGO: true) may leave SVG unoptimized, increasing bundle size.

fix

Only disable if you have pre-optimized SVGs.

affects: >=1.1.0

gotchaBy default, ID namespacing is enabled and uses the import variable name. Ensure variable names are unique to avoid collisions.

fix

Use disableNamespaceIds: true if IDs are not used in CSS.

affects: >=1.0.0

Errors

Common errors & fixes

SyntaxError: Unexpected token '<'

SVG file not being processed by the plugin, often due to webpack using a different loader.

fix

Add the babel-loader with this plugin before other loaders in webpack config, or use the plugin directly in .babelrc and ensure svg files are not handled by other loaders.

Cannot find module 'babel-plugin-inline-svg'

Plugin is not installed or not listed in devDependencies.

fix

Run 'npm install --save-dev babel-plugin-inline-svg' and verify your .babelrc or babel config.

TypeError: (0 , _someSvg.default) is not a function

Trying to use require() without .default, or importing a file that is not processed by the plugin.

fix

Use import statement or access .default when using require(). Ensure the file has .svg extension and the plugin is active.

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

babelrequiredRequires Babel as runtime

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/iest/babel-plugin-inline-svg ↗

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