babel-plugin-inline-react-svg

2.0.2 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

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

cause Plugin not installed or missing from devDependencies.

fix

npm install --save-dev babel-plugin-inline-react-svg

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

cause Using CommonJS require() incorrectly when plugin expects default export.

fix

Use import or const plugin = require('babel-plugin-inline-react-svg').default;

Warnings

breaking v2.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.

deprecated The svgo option 'extendDefaultPlugins' from svgo v1 is deprecated in svgo v2. ↓

fix Use the 'plugins' array directly; see SVGO documentation for v2 configuration.

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

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

Install

npm install babel-plugin-inline-react-svg

yarn add babel-plugin-inline-react-svg

pnpm add babel-plugin-inline-react-svg

Imports

plugin

wrong

const plugin = require('babel-plugin-inline-react-svg')

correct

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

Default export; CommonJS require also works.

babel config

wrong

plugins: ['babel-plugin-inline-react-svg']

correct

plugins: ['inline-react-svg']

In Babel config, use shorthand without prefix.

TypeScript

wrong

import Icon from './icon.svg?inline';

correct

import * as React from 'react';
import Icon from './icon.svg';

No special query string needed; declaration file may be needed for TS.

Quickstart

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;