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–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
svg-to-vue-component/loader
✓ module.exports = { module: { rules: [{ test: /\.svg$/, use: ['vue-loader', 'svg-to-vue-component/loader'] }] } }
✗ import svgLoader from 'svg-to-vue-component/loader'
This is a Webpack loader path, not a direct JavaScript module import for runtime use. It must be configured in your webpack rules.
CheckIcon
✓ import CheckIcon from './check-icon.svg'
✗ import { CheckIcon } from './check-icon.svg'
The loader transforms the SVG file into a default export (Vue component). No named exports are typically available from the SVG file itself.
svg-to-vue-component/nuxt
✓ module.exports = { modules: ['svg-to-vue-component/nuxt'] }
✗ import NuxtModule from 'svg-to-vue-component/nuxt'
This is a Nuxt.js module path, configured in `nuxt.config.js` not directly imported into application code.
This quickstart demonstrates how to configure webpack to process SVG files into Vue components and then how to import and use such a component within a Vue SFC, including passing props and handling events.
/* webpack.config.js */
module.exports = {
module: {
rules: [
{
test: /\.svg$/,
// Ensure this rule only applies to SVG files imported by JS/TS/Vue files
// To avoid conflicts with CSS imports of SVGs (which might need file-loader)
issuer: /\.(vue|js|ts|svg)$/,
use: [
// Processes the SVG file into a Vue SFC template
'vue-loader',
// Compiles the SVG content into a render function/template for Vue
'svg-to-vue-component/loader'
]
}
]
}
// ...other webpack configurations
}
/* MyComponent.vue */
<template>
<div>
<h1>My Awesome Icon</h1>
<!-- Use the imported SVG as a Vue component -->
<CheckIcon width="24" height="24" fill="currentColor" @click="handleIconClick" />
<p>Click the icon!</p>
</div>
</template>
<script>
import CheckIcon from './assets/check-icon.svg' // Path to your SVG file
export default {
components: {
CheckIcon
},
methods: {
handleIconClick() {
console.log('SVG icon clicked!')
}
}
}
</script>
Debug
Known issues
breakingThe package's last release was in April 2019. It is highly likely to be incompatible with modern Vue 3 applications, Vue CLI versions 5+, Webpack 5+, and newer major versions of Nuxt.js or other bundlers/frameworks without significant manual configuration adjustments or polyfills. Expect breaking changes in tooling and API compatibility.fixConsider migrating to actively maintained alternatives or be prepared to extensively patch webpack configurations for compatibility with legacy versions of Vue/Webpack.
affects: >=0.3.9 (any version beyond 2019)
gotchaWebpack configurations for `.svg` files can conflict. It's crucial to define `issuer` rules to ensure `svg-to-vue-component/loader` only processes SVG files imported by Vue, JavaScript, or TypeScript files, preventing clashes with SVG files imported via CSS (which might require `file-loader` or `url-loader`).fixAlways include an `issuer` property in your webpack rule, e.g., `issuer: /\.(vue|js|ts|svg)$/`, to precisely target files that should be compiled as Vue components.
affects: >=0.1.0
gotchaThis loader transforms an SVG into a Vue Single File Component structure. Therefore, it *must* be chained with `vue-loader` to properly interpret the output. Omitting `vue-loader` will result in webpack errors trying to parse a `.vue` file without the appropriate handler.fixEnsure `vue-loader` is placed before `svg-to-vue-component/loader` in your webpack rule's `use` array: `use: ['vue-loader', 'svg-to-vue-component/loader']`.
affects: >=0.1.0
deprecatedGiven the last release was in April 2019 and the low version number, the project appears to be unmaintained. There will be no further bug fixes, feature enhancements, or official support for newer versions of Vue or its ecosystem tools.fixEvaluate actively maintained SVG-as-component solutions for Vue, such as `@vitejs/plugin-vue-jsx` with SVG handling or community-driven webpack loaders if you are on an older Vue/Webpack setup.
affects: All versions
Errors
Common errors & fixes
Module not found: Error: Can't resolve 'path/to/icon.svg'
Webpack is unable to find or correctly process the SVG file due to an incorrect or missing rule configuration for `.svg` files, or conflicts with other SVG handling rules.
fixVerify your webpack configuration for `.svg` files. Ensure the `test: /\.svg$/` rule is present, the `issuer: /\.(vue|js|ts|svg)$/` is correctly specified, and `vue-loader` is included in the `use` array before `svg-to-vue-component/loader`.
Syntax Error: Unexpected token '<' (or similar parsing errors in old browsers like IE)
The SVG output generated by the loader might contain features or syntax not compatible with older browser engines, specifically mentioned as a fix in v0.3.5 for IE.
fixEnsure you are using at least `v0.3.5` of `svg-to-vue-component`. If issues persist, adjust SVGO loader options (if applicable) to ensure maximum browser compatibility for the SVG output.
Unknown custom element: <SvgIcon> - did you register the component correctly?
The imported SVG component was not correctly registered with the parent Vue component.
fixMake sure the component is imported correctly (e.g., `import SvgIcon from './icon.svg'`) and then added to the `components` option in your Vue component: `export default { components: { SvgIcon } }`. Audit
Dependencies
vue-loaderrequiredRequired to process the output of svg-to-vue-component/loader, as it transforms SVG into a .vue file format.
svgooptionalUsed internally for SVG optimization; configurable via loader options.
webpackrequiredThis package is a webpack loader and requires webpack to function.
vuerequiredThe compiled output is a Vue component, requiring Vue runtime.