rollup-plugin-svg-to-vue

1.0.0 verified Mon Apr 27 auth: no javascript

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.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module not supported. ↓

cause Package is ESM-only but loaded via CommonJS require.

fix

Use import syntax or set "type": "module" in package.json, or use dynamic import().

error TypeError: svgToVue is not a function ↓

cause Importing named export 'svgToVue' but package only exports default.

fix

Use default import: import svgToVue from 'rollup-plugin-svg-to-vue'

error [plugin:vue] [Vue warn]: Component is missing template or render function. ↓

cause SVG file not processed by plugin; possibly include/exclude pattern incorrect.

fix

Check include pattern in svgToVue options matches SVG file path.

Warnings

breaking Package is ESM-only; does not provide a CommonJS build. Require() will throw 'ERR_REQUIRE_ESM'. ↓

fix Use import syntax or configure Rollup to handle ESM dependencies.

deprecated Plugin relies on rollup-plugin-vue; future versions of Rollup may bundle Vue support differently. ↓

fix Monitor rollup-plugin-vue compatibility. Consider using @vitejs/plugin-vue if migrating to Vite.

gotcha SVGO options passed directly; some SVGO config changes may break SVG rendering in unexpected ways. ↓

fix Test SVGO transformations thoroughly. Use removeViewBox: false if resizing issues appear.

gotcha When target is 'node', the generated component uses SSR-compatible render functions; may differ from browser behavior. ↓

fix Ensure appropriate polyfills for document/global in SSR environment.

Install

npm install rollup-plugin-svg-to-vue

yarn add rollup-plugin-svg-to-vue

pnpm add rollup-plugin-svg-to-vue

Imports

default (svgToVue)
wrong
```
const svgToVue = require('rollup-plugin-svg-to-vue')
```
correct
```
import svgToVue from 'rollup-plugin-svg-to-vue'
```
ESM-only; CommonJS require will fail because package does not export a CJS bundle.
svgToVue (named)
```
import { svgToVue } from 'rollup-plugin-svg-to-vue'
```
Named export is not available — only default export. Using named will result in undefined.
vue file import
```
import MyIcon from './icon.svg'
```
After plugin configuration, importing .svg files returns a Vue component object. Works in Rollup with Vue plugin.

Quickstart

Demonstrates Rollup configuration using the plugin with optional SVGO settings, and a Vue component importing an SVG file as a component.

// rollup.config.js
import svgToVue from 'rollup-plugin-svg-to-vue';
import vue from 'rollup-plugin-vue';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    svgToVue({
      include: '**/*.svg',
      exclude: ['node_modules/**'],
      svgo: {
        plugins: [
          { removeViewBox: false },
          { removeTitle: true }
        ]
      },
      sourceMap: true,
      target: 'browser'
    }),
    vue()
  ]
};

// MyComponent.vue
<template>
  <div>
    <MyIcon class="icon" />
  </div>
</template>

<script>
import MyIcon from './icon.svg';
export default {
  components: { MyIcon }
}
</script>