{"id":22086,"library":"rollup-plugin-inline-svg","title":"rollup-plugin-inline-svg","description":"Rollup plugin that inlines SVG files as strings or data URIs. Current stable version is 3.0.3 (released 2022). Requires Rollup as a peer dependency. Supports both ES modules and CommonJS output. Key differentiator: lightweight, TypeScript types included, and allows custom transformations via options. Alternatives like @svgr/rollup focus on React components, while this plugin is framework-agnostic and simpler for raw SVG inlining.","status":"active","version":"3.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/sionzee/rollup-plugin-inline-svg","tags":["javascript","rollup","rollup-plugin","plugin","svg","inline","typescript"],"install":[{"cmd":"npm install rollup-plugin-inline-svg","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-inline-svg","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-inline-svg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required to use the plugin","package":"rollup","optional":false}],"imports":[{"note":"Default export only. Named import will result in undefined.","wrong":"import { inlineSvg } from 'rollup-plugin-inline-svg'","symbol":"inlineSvg","correct":"import inlineSvg from 'rollup-plugin-inline-svg'"}],"quickstart":{"code":"import inlineSvg from 'rollup-plugin-inline-svg';\n\n// rollup.config.js\nexport default {\n  plugins: [\n    inlineSvg({\n      // Optional: specify directories for svg files\n      paths: ['src/svg'],\n      // Optional: define custom transform function\n      transform: (svg, id) => {\n        // e.g., minify or modify svg string\n        return svg.replace(/\\s+/g, ' ');\n      }\n    })\n  ]\n};\n\n// Usage in JavaScript:\n// import icon from './icon.svg?inline';\n// console.log(icon); // '<svg>...'","lang":"typescript","description":"Shows how to import and configure the plugin in a Rollup config, including custom transform and SVG import example."},"warnings":[{"fix":"Use import icon from './icon.svg?inline' instead of plain './icon.svg'.","message":"SVG files must be imported with ?inline query parameter to trigger the plugin.","severity":"gotcha","affected_versions":"*"},{"fix":"Add option { dataUri: true } to inlineSvg().","message":"The plugin returns the SVG as a string, not a data URI by default. Use the `dataUri` option to get a data URI.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"If you need Rollup to output CommonJS, use @rollup/plugin-commonjs or set output.format to 'cjs' and ensure the plugin works with it.","message":"Version 3.0.0 removed support for CommonJS output by default; now ESM only.","severity":"breaking","affected_versions":"3.0.0"},{"fix":"Use Rollup's own include/exclude patterns via the plugin's options or Rollup's 'watch' options.","message":"Option 'include' and 'exclude' are deprecated in v3 in favor of Rollup's built-in filter.","severity":"deprecated","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install rollup-plugin-inline-svg' or ensure it's in package.json.","cause":"Package not installed or outdated path.","error":"Error: Cannot find module 'rollup-plugin-inline-svg'"},{"fix":"Use 'import inlineSvg from \"rollup-plugin-inline-svg\"' (default import).","cause":"Incorrect import (named instead of default).","error":"TypeError: inlineSvg is not a function"},{"fix":"Upgrade to v3.0.0+ or remove the dataUri option.","cause":"Using option introduced in v3 with older version.","error":"The 'dataUri' option is not supported before version 3."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}