Registry / rollup-plugin-svgr

rollup-plugin-svgr

library4.0.1jsnpmunverified

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.

npm install rollup-plugin-svgr

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-SVGR

rollup-plugin-svgr

javascriptv4.0.1

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–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

svgr

✓ import svgr from 'rollup-plugin-svgr'

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

Default export only; named export does not exist.

svgr (CommonJS)

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

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

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

Plugin usage

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

✗ svgr({ svgo: true })

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

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 ='); }, }), ], };

Debug

Known issues

breakingDrop of Babel option, replaced with transform option

fix

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

affects: >=4.0.0

breakingStop using fs.readFileSync

fix

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

affects: >=4.0.0

breakingNode 18 support dropped

fix

Upgrade to Node >=20.9.0

affects: >=3.0.0

breakingNode 16 support dropped

fix

Upgrade to Node >=18

affects: >=2.0.0

gotchaNo SVGO optimization by default; cannot pass svgo: true in svgrOptions

fix

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

affects: >=4.0.0

Errors

Common errors & fixes

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

Upgraded to v4.0.0 which removed the babel option.

fix

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

TypeError: svgr is not a function

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: The current node version does not satisfy the required version (>=20.9.0)

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

Upgrade

Version history

4.0.1latest on npm

Audit

Dependencies

@svgr/corerequiredCore SVGR library for SVG to React component transformation

@svgr/plugin-jsxrequiredSVGR plugin to generate JSX output

rolluprequiredPeer dependency required to use the plugin

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/christophehurpeau/rollup-plugin-svgr ↗

packagehttps://www.npmjs.com/package/rollup-plugin-svgr ↗

homepagehttps://rollup-plugin-svgr.com ↗