{"id":22245,"library":"rollup-plugin-svg-to-jsx","title":"rollup-plugin-svg-to-jsx","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/nolanlawson/rollup-plugin-svg-to-jsx","tags":["javascript"],"install":[{"cmd":"npm install rollup-plugin-svg-to-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-svg-to-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-svg-to-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core transformation library","package":"svg-to-jsx","optional":false}],"imports":[{"note":"ESM-only package; CJS require may fail depending on bundler","wrong":"const svgToJsx = require('rollup-plugin-svg-to-jsx')","symbol":"default","correct":"import svgToJsx from 'rollup-plugin-svg-to-jsx'"},{"note":"Plugin is called as a function, not using new.","wrong":"export default { plugins: [ new svgToJsx() ] }","symbol":"svgToJsx (default)","correct":"export default { plugins: [ svgToJsx() ] }"},{"note":"include and exclude are one glob string each, not arrays.","wrong":"svgToJsx({ include: ['**/*.svg'] })","symbol":"options object","correct":"svgToJsx({ include: '**/*.svg', exclude: 'file.svg' })"}],"quickstart":{"code":"// rollup.config.js\nimport svgToJsx from 'rollup-plugin-svg-to-jsx'\n\nexport default {\n  input: 'src/index.js',\n  output: {\n    file: 'dist/bundle.js',\n    format: 'es'\n  },\n  plugins: [\n    svgToJsx({\n      include: '**/*.svg',\n      exclude: 'excluded.svg'\n    })\n  ]\n}","lang":"javascript","description":"Rollup config that converts imported SVGs to React JSX components using the plugin with include/exclude filters."},"warnings":[{"fix":"Add '@rollup/plugin-commonjs' or use 'react' as external in rollup config if not bundling React.","message":"Plugin does not handle React import automatically; ensure React is in scope or configured via external.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If using Preact or another JSX library, add a pragma or configure via Babel/Macros.","message":"Output assumes React is imported in the bundle; the generated JSX uses 'React.createElement' implicitly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Migrate to @svgr/rollup (npm install @svgr/rollup) which offers options like icon, SVGO, and TypeScript support.","message":"This plugin is a thin wrapper and may not be actively maintained; prefer @svgr/rollup for more features and updates.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add the plugin to rollup.config.js plugins array.","cause":"Rollup cannot handle SVG files without a plugin; plugin not included in config.","error":"Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)"},{"fix":"Ensure React is either bundled (via external: ['react']) or imported in the entry point.","cause":"Generated JSX uses React but React is not included in the bundle.","error":"ReferenceError: React is not defined"},{"fix":"Run 'npm install rollup-plugin-svg-to-jsx' or 'yarn add rollup-plugin-svg-to-jsx'.","cause":"Package not installed or missing from node_modules.","error":"Error: Could not resolve 'rollup-plugin-svg-to-jsx'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}