Registry / web-framework / svg-to-vue

svg-to-vue

JSON →
library0.7.0jsnpmunverified

svg-to-vue is a utility designed to convert raw SVG code directly into a Vue component definition. It currently resides at version 0.7.0. While no explicit release cadence is published, it functions as a stable tool for its specific purpose. Its core differentiator is simplifying the integration of arbitrary SVG strings into Vue 2.x applications as programmatically generated components, with optional built-in SVGO optimization to reduce SVG file size and improve performance. This makes it particularly useful for dynamically rendering SVG content or when SVGs are sourced from external APIs or user input, rather than being static assets. It explicitly depends on Vue 2.x's `vue-template-compiler` for its functionality, making it incompatible with Vue 3.x.

web-frameworkserialization
npm install svg-to-vue
github ↗package ↗
INSTALL
IMPORT
SIG · SVG-TO-VUE
S
svg-to-vue
web-frameworkjavascriptv0.7.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
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
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

svgToVue
✓ const svgToVue = require('svg-to-vue');
✗ import svgToVue from 'svg-to-vue';
This package is primarily designed for CommonJS environments and exports a single function. Direct ESM import may not work as expected without proper module interoperability configuration in tools like TypeScript or Babel.

This quickstart converts a basic SVG string into a Vue 2.x component definition, including SVGO optimization and ID prefixing, then logs the resulting component object.

const svgToVue = require('svg-to-vue'); const svgCode = ` <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="50" fill="blue" /> <text x="150" y="100" font-family="sans-serif" font-size="20" fill="white" text-anchor="middle" alignment-baseline="middle">Hello SVG!</text> </svg> `; svgToVue(svgCode, { svgoConfig: { plugins: [ { name: 'preset-default' }, { name: 'prefixIds', params: { prefix: 'my-unique-svg-id-' } } ] }, svgoPath: 'dynamic-svg-component' }) .then((componentDefinition) => { // `componentDefinition` contains a Vue component object // that can be registered globally or locally in a Vue 2.x app. console.log('Vue Component Definition:', componentDefinition); // Example: To use in a Vue app (assuming Vue is available): // new Vue({ // el: '#app', // components: { MyDynamicSVG: componentDefinition }, // template: '<div id="app"><MyDynamicSVG /></div>' // }); }) .catch(error => { console.error('Error converting SVG:', error); });
svg-to-vue --version
Debug
Known issues
breakingThe package explicitly relies on `vue-template-compiler`, which is a dependency for Vue 2.x. It is not compatible with Vue 3.x applications and will likely fail to generate valid components or lead to runtime errors.
fix
Use this package only within Vue 2.x environments. For Vue 3.x, explore alternative solutions like `vite-plugin-svg-component` or manually importing SVG as components.
affects: >=0.1.0
gotchaMissing `vue-template-compiler` can lead to runtime errors. Although it's a peer dependency, the installation instructions explicitly state it's required, meaning it won't be automatically installed by `svg-to-vue`.
fix
Always install `vue-template-compiler` alongside `svg-to-vue`: `npm i svg-to-vue vue-template-compiler` or `yarn add svg-to-vue vue-template-compiler`.
affects: >=0.1.0
gotchaThe `svgoPath` option is crucial for correct ID generation when using SVGO's `prefixIds` plugin. If `prefixIds` is enabled in `svgoConfig` but `svgoPath` is null or not unique, it can lead to non-unique IDs in the rendered SVG, causing rendering issues, styling conflicts, or accessibility problems if multiple generated components are on the same page.
fix
Always provide a unique string for the `svgoPath` option (e.g., a file path or a unique component identifier) when using SVGO's `prefixIds` plugin to ensure consistent and unique IDs across your application.
affects: >=0.1.0
deprecatedThe `vue-template-compiler` (and by extension, this utility) is tied to the end-of-life Vue 2 ecosystem. While functional, active development and new features for Vue 2-dependent tools are minimal.
fix
Evaluate migration to Vue 3.x and its associated SVG handling methods for long-term project viability. Continue using `svg-to-vue` only if locked into a Vue 2.x project.
affects: >=0.1.0
Errors
Common errors & fixes
Error: Cannot find module 'vue-template-compiler' from '[path to svg-to-vue]'
The `vue-template-compiler` package is a peer dependency but was not installed alongside `svg-to-vue`.
fix
Install the missing dependency: `npm install vue-template-compiler` or `yarn add vue-template-compiler`.
TypeError: (0 , _svg_to_vue__WEBPACK_IMPORTED_MODULE_0__.default) is not a function
This error occurs when attempting to use ESM `import` syntax (e.g., `import svgToVue from 'svg-to-vue'`) on a CommonJS-only package in environments that don't correctly handle synthetic default imports or when the package doesn't provide a named default export.
fix
Use the CommonJS `require` syntax: `const svgToVue = require('svg-to-vue');`. If using TypeScript, ensure `esModuleInterop: true` and `allowSyntheticDefaultImports: true` are enabled in `tsconfig.json`.
Upgrade
Version history
0.7.0latest on npm
Audit
Dependencies
vue-template-compilerrequiredRequired for compiling Vue 2.x templates from the generated component definition. It is a peer dependency and must be installed separately.
Agent activity
3 hits · last 30 days
node
2
Resources
githubhttps://github.com/visualfanatic/svg-to-vue ↗
packagehttps://www.npmjs.com/package/svg-to-vue ↗