Registry / web-framework / rollup-plugin-svg-to-jsx

rollup-plugin-svg-to-jsx

library1.0.0jsnpmunverified

Rollup plugin that converts SVG files to JSX components using svg-to-jsx. Current stable version is 1.0.0, released as a minimal wrapper with include/exclude filtering. It transforms SVG imports into React functional components that accept props. The plugin is a simple glue between Rollup and the svg-to-jsx library, with no additional features or active development. Alternatives like @svgr/rollup offer more customization and maintenance.

web-framework

npm install rollup-plugin-svg-to-jsx

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-SVG-

rollup-plugin-svg-to-jsx

web-frameworkjavascriptv1.0.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–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

default

✓ import svgToJsx from 'rollup-plugin-svg-to-jsx'

✗ const svgToJsx = require('rollup-plugin-svg-to-jsx')

ESM-only package; CJS require may fail depending on bundler

svgToJsx (default)

✓ export default { plugins: [ svgToJsx() ] }

✗ export default { plugins: [ new svgToJsx() ] }

Plugin is called as a function, not using new.

options object

✓ svgToJsx({ include: '**/*.svg', exclude: 'file.svg' })

✗ svgToJsx({ include: ['**/*.svg'] })

include and exclude are one glob string each, not arrays.

Rollup config that converts imported SVGs to React JSX components using the plugin with include/exclude filters.

// rollup.config.js import svgToJsx from 'rollup-plugin-svg-to-jsx' export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'es' }, plugins: [ svgToJsx({ include: '**/*.svg', exclude: 'excluded.svg' }) ] }

Debug

Known issues

gotchaPlugin does not handle React import automatically; ensure React is in scope or configured via external.

fix

Add '@rollup/plugin-commonjs' or use 'react' as external in rollup config if not bundling React.

affects: >=1.0.0

gotchaOutput assumes React is imported in the bundle; the generated JSX uses 'React.createElement' implicitly.

fix

If using Preact or another JSX library, add a pragma or configure via Babel/Macros.

affects: >=1.0.0

deprecatedThis plugin is a thin wrapper and may not be actively maintained; prefer @svgr/rollup for more features and updates.

fix

Migrate to @svgr/rollup (npm install @svgr/rollup) which offers options like icon, SVGO, and TypeScript support.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Rollup cannot handle SVG files without a plugin; plugin not included in config.

fix

Add the plugin to rollup.config.js plugins array.

ReferenceError: React is not defined

Generated JSX uses React but React is not included in the bundle.

fix

Ensure React is either bundled (via external: ['react']) or imported in the entry point.

Error: Could not resolve 'rollup-plugin-svg-to-jsx'

Package not installed or missing from node_modules.

fix

Run 'npm install rollup-plugin-svg-to-jsx' or 'yarn add rollup-plugin-svg-to-jsx'.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

svg-to-jsxrequiredCore transformation library

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/nolanlawson/rollup-plugin-svg-to-jsx ↗

packagehttps://www.npmjs.com/package/rollup-plugin-svg-to-jsx ↗