Rollup Plugin SVGR

4.0.1 verified Mon Apr 27 auth: no javascript

Rollup plugin that converts SVG files into React components using SVGR, without SVGO optimization or Babel transformation. Version 4.0.1 runs on Node >=20.9.0. Regularly updated with semver releases. Unlike other SVGR integrations, this plugin intentionally omits SVGO and Babel, reducing bundle size and build complexity for projects that handle optimization elsewhere. It supports a custom transform option instead of the removed babel option.

Common errors

error Error: [plugin svgr] The 'babel' option is no longer supported. Use the 'transform' option instead. ↓

cause Upgraded to v4.0.0 which removed the babel option.

fix

Replace babel with transform option: svgr({ transform(code, id) { ... } })

error TypeError: svgr is not a function ↓

cause Importing as named export instead of default export.

fix

Use import svgr from 'rollup-plugin-svgr' or const svgr = require('rollup-plugin-svgr').default

error Error: The current node version does not satisfy the required version (>=20.9.0) ↓

cause Node.js version is too old (<20.9.0).

fix

Upgrade Node.js to >=20.9.0 or use an older version of the plugin (e.g., 2.x for Node 16).

Warnings

breaking Drop of Babel option, replaced with transform option ↓

fix Replace babel option with a transform function: transform(code, id) { ... }

breaking Stop using fs.readFileSync ↓

fix No direct action needed; if you rely on synchronous behavior, upgrade to asynchronous flow.

breaking Node 18 support dropped ↓

fix Upgrade to Node >=20.9.0

breaking Node 16 support dropped ↓

fix Upgrade to Node >=18

gotcha No SVGO optimization by default; cannot pass svgo: true in svgrOptions ↓

fix Use separate SVGO rollup plugin if optimization needed, or implement custom transform.

Install

npm install rollup-plugin-svgr

yarn add rollup-plugin-svgr

pnpm add rollup-plugin-svgr

Imports

svgr

wrong

import { svgr } from 'rollup-plugin-svgr'

correct

import svgr from 'rollup-plugin-svgr'

Default export only; named export does not exist.

svgr (CommonJS)

wrong

const svgr = require('rollup-plugin-svgr')

correct

const svgr = require('rollup-plugin-svgr').default

CJS users must use .default due to ESM-CJS interop.

Plugin usage

wrong

svgr({ svgo: true })

correct

svgr({ include: '**/*.svg', exclude: 'node_modules/**', svgrOptions: { icon: true } })

SVGO is intentionally excluded; pass svgoConfig or transform options instead.

Quickstart

Shows basic setup of rollup-plugin-svgr with include/exclude, SVGR options, and custom transform function.

import svgr from 'rollup-plugin-svgr';

export default {
  input: 'src/index.js',
  output: { dir: 'dist', format: 'esm' },
  plugins: [
    svgr({
      include: '**/*.svg',
      svgrOptions: {
        icon: true,
        svgo: false,
        titleProp: true,
      },
      transform: (code, id) => {
        // optional custom transform, replaces old babel option
        return code.replace('export default', 'export const MySvg =');
      },
    }),
  ],
};