babel-plugin-inline-svg

1.2.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error SyntaxError: Unexpected token '<' ↓

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

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

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

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

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

Warnings

gotcha SVG 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.

deprecated In v1.2.0, the argument order for namespaceIds transformer changed to standardize. ↓

fix Update custom transformers that rely on the old argument order.

gotcha Disabling SVGO (disableSVGO: true) may leave SVG unoptimized, increasing bundle size. ↓

fix Only disable if you have pre-optimized SVGs.

gotcha By 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.

Install

npm install babel-plugin-inline-svg

yarn add babel-plugin-inline-svg

pnpm add babel-plugin-inline-svg

Imports

default (import)
wrong
```
const someSvg = require('./file.svg');
```
correct
```
import someSvg from './file.svg';
```
Default import yields a string. CommonJS require() will not work without additional configuration.

default (require)

wrong

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

correct

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

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; }.

Quickstart

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" />;
}