{"id":22248,"library":"rollup-plugin-svg-to-vue","title":"rollup-plugin-svg-to-vue","description":"A Rollup plugin that imports SVG files as Vue 3 components. Current stable version is 1.0.0. No release cadence documented. Key differentiator: transforms SVG directly into Vue 3 single-file component format, leveraging @vue/compiler-sfc for compilation. Unlike generic SVG loaders, it produces tree-shakable, scoped-style components. Primarily for use with rollup-plugin-vue in browser or SSR builds. Requires Node >=10, peer dependency on @vue/compiler-sfc.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/supermonkeyz/rollup-plugin-svg-to-vue","tags":["javascript","rollup","plugin","svg","vue","vue3"],"install":[{"cmd":"npm install rollup-plugin-svg-to-vue","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-svg-to-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-svg-to-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for compiling Vue 3 single-file components","package":"@vue/compiler-sfc","optional":false},{"reason":"Often used alongside for full Vue single-file component support; not a formal dependency","package":"rollup-plugin-vue","optional":true}],"imports":[{"note":"ESM-only; CommonJS require will fail because package does not export a CJS bundle.","wrong":"const svgToVue = require('rollup-plugin-svg-to-vue')","symbol":"default (svgToVue)","correct":"import svgToVue from 'rollup-plugin-svg-to-vue'"},{"note":"Named export is not available — only default export. Using named will result in undefined.","wrong":null,"symbol":"svgToVue (named)","correct":"import { svgToVue } from 'rollup-plugin-svg-to-vue'"},{"note":"After plugin configuration, importing .svg files returns a Vue component object. Works in Rollup with Vue plugin.","wrong":null,"symbol":"vue file import","correct":"import MyIcon from './icon.svg'"}],"quickstart":{"code":"// rollup.config.js\nimport svgToVue from 'rollup-plugin-svg-to-vue';\nimport vue from 'rollup-plugin-vue';\n\nexport default {\n  input: 'src/main.js',\n  output: {\n    file: 'dist/bundle.js',\n    format: 'esm'\n  },\n  plugins: [\n    svgToVue({\n      include: '**/*.svg',\n      exclude: ['node_modules/**'],\n      svgo: {\n        plugins: [\n          { removeViewBox: false },\n          { removeTitle: true }\n        ]\n      },\n      sourceMap: true,\n      target: 'browser'\n    }),\n    vue()\n  ]\n};\n\n// MyComponent.vue\n<template>\n  <div>\n    <MyIcon class=\"icon\" />\n  </div>\n</template>\n\n<script>\nimport MyIcon from './icon.svg';\nexport default {\n  components: { MyIcon }\n}\n</script>","lang":"javascript","description":"Demonstrates Rollup configuration using the plugin with optional SVGO settings, and a Vue component importing an SVG file as a component."},"warnings":[{"fix":"Use import syntax or configure Rollup to handle ESM dependencies.","message":"Package is ESM-only; does not provide a CommonJS build. Require() will throw 'ERR_REQUIRE_ESM'.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Monitor rollup-plugin-vue compatibility. Consider using @vitejs/plugin-vue if migrating to Vite.","message":"Plugin relies on rollup-plugin-vue; future versions of Rollup may bundle Vue support differently.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Test SVGO transformations thoroughly. Use removeViewBox: false if resizing issues appear.","message":"SVGO options passed directly; some SVGO config changes may break SVG rendering in unexpected ways.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure appropriate polyfills for document/global in SSR environment.","message":"When target is 'node', the generated component uses SSR-compatible render functions; may differ from browser behavior.","severity":"gotcha","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":"Use import syntax or set \"type\": \"module\" in package.json, or use dynamic import().","cause":"Package is ESM-only but loaded via CommonJS require.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module not supported."},{"fix":"Use default import: import svgToVue from 'rollup-plugin-svg-to-vue'","cause":"Importing named export 'svgToVue' but package only exports default.","error":"TypeError: svgToVue is not a function"},{"fix":"Check include pattern in svgToVue options matches SVG file path.","cause":"SVG file not processed by plugin; possibly include/exclude pattern incorrect.","error":"[plugin:vue] [Vue warn]: Component is missing template or render function."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}