rollup-plugin-svg-to-jsx

1.0.0 verified Mon Apr 27 auth: no javascript

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.

Common errors

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

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

fix

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

error ReferenceError: React is not defined ↓

cause 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 Error: Could not resolve 'rollup-plugin-svg-to-jsx' ↓

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

Warnings

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

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

deprecated This 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.

Install

npm install rollup-plugin-svg-to-jsx

yarn add rollup-plugin-svg-to-jsx

pnpm add rollup-plugin-svg-to-jsx

Imports

default

wrong

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

correct

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

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

svgToJsx (default)

wrong

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

correct

export default { plugins: [ svgToJsx() ] }

Plugin is called as a function, not using new.

options object

wrong

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

correct

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

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

Quickstart

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