{"id":22251,"library":"rollup-plugin-svgr","title":"Rollup Plugin SVGR","description":"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.","status":"active","version":"4.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/christophehurpeau/rollup-plugin-svgr","tags":["javascript"],"install":[{"cmd":"npm install rollup-plugin-svgr","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-svgr","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-svgr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core SVGR library for SVG to React component transformation","package":"@svgr/core","optional":false},{"reason":"SVGR plugin to generate JSX output","package":"@svgr/plugin-jsx","optional":false},{"reason":"Peer dependency required to use the plugin","package":"rollup","optional":false}],"imports":[{"note":"Default export only; named export does not exist.","wrong":"import { svgr } from 'rollup-plugin-svgr'","symbol":"svgr","correct":"import svgr from 'rollup-plugin-svgr'"},{"note":"CJS users must use .default due to ESM-CJS interop.","wrong":"const svgr = require('rollup-plugin-svgr')","symbol":"svgr (CommonJS)","correct":"const svgr = require('rollup-plugin-svgr').default"},{"note":"SVGO is intentionally excluded; pass svgoConfig or transform options instead.","wrong":"svgr({ svgo: true })","symbol":"Plugin usage","correct":"svgr({ include: '**/*.svg', exclude: 'node_modules/**', svgrOptions: { icon: true } })"}],"quickstart":{"code":"import svgr from 'rollup-plugin-svgr';\n\nexport default {\n  input: 'src/index.js',\n  output: { dir: 'dist', format: 'esm' },\n  plugins: [\n    svgr({\n      include: '**/*.svg',\n      svgrOptions: {\n        icon: true,\n        svgo: false,\n        titleProp: true,\n      },\n      transform: (code, id) => {\n        // optional custom transform, replaces old babel option\n        return code.replace('export default', 'export const MySvg =');\n      },\n    }),\n  ],\n};\n","lang":"javascript","description":"Shows basic setup of rollup-plugin-svgr with include/exclude, SVGR options, and custom transform function."},"warnings":[{"fix":"Replace babel option with a transform function: transform(code, id) { ... }","message":"Drop of Babel option, replaced with transform option","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"No direct action needed; if you rely on synchronous behavior, upgrade to asynchronous flow.","message":"Stop using fs.readFileSync","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Upgrade to Node >=20.9.0","message":"Node 18 support dropped","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade to Node >=18","message":"Node 16 support dropped","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use separate SVGO rollup plugin if optimization needed, or implement custom transform.","message":"No SVGO optimization by default; cannot pass svgo: true in svgrOptions","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Replace babel with transform option: svgr({ transform(code, id) { ... } })","cause":"Upgraded to v4.0.0 which removed the babel option.","error":"Error: [plugin svgr] The 'babel' option is no longer supported. Use the 'transform' option instead."},{"fix":"Use import svgr from 'rollup-plugin-svgr' or const svgr = require('rollup-plugin-svgr').default","cause":"Importing as named export instead of default export.","error":"TypeError: svgr is not a function"},{"fix":"Upgrade Node.js to >=20.9.0 or use an older version of the plugin (e.g., 2.x for Node 16).","cause":"Node.js version is too old (<20.9.0).","error":"Error: The current node version does not satisfy the required version (>=20.9.0)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}