Registry /
web-framework / rollup-plugin-svg-to-vue
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–223 runs
build_error
glibcnode 18–223 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
default (svgToVue)
✓ import svgToVue from 'rollup-plugin-svg-to-vue'
✗ const svgToVue = require('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.
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>
Errors
Common errors & fixes
Error [ERR_REQUIRE_ESM]: require() of ES Module not supported.
Package is ESM-only but loaded via CommonJS require.
fixUse import syntax or set "type": "module" in package.json, or use dynamic import().
TypeError: svgToVue is not a function
Importing named export 'svgToVue' but package only exports default.
fixUse default import: import svgToVue from 'rollup-plugin-svg-to-vue'
[plugin:vue] [Vue warn]: Component is missing template or render function.
SVG file not processed by plugin; possibly include/exclude pattern incorrect.
fixCheck include pattern in svgToVue options matches SVG file path.
Audit
Dependencies
@vue/compiler-sfcrequiredPeer dependency for compiling Vue 3 single-file components
rollup-plugin-vueoptionalOften used alongside for full Vue single-file component support; not a formal dependency