svg-vue

library0.2.0jsnpmunverified

svg-vue is a Vue 2 component designed to display SVG assets that have been processed and inlined by its companion Laravel Mix plugin, `laravel-mix-svg-vue`. It provides a declarative way to render SVGs within Vue templates, leveraging the build-time optimizations (like SVGO) provided by the Laravel Mix plugin. The current and only stable version is `0.2.0`, published over four years ago, indicating the package is largely abandoned with no ongoing development or maintenance. Its core differentiator was its tight integration into the Laravel Mix build pipeline, which was prevalent in many Laravel-Vue 2 projects, allowing for seamless management and rendering of SVGs without manual inline embedding or complex loading configurations. It does not support Vue 3+ directly and is strongly tied to older build tooling. Alternatives like `vue-inline-svg` or `unplugin-svg-vue-component` offer similar functionality for modern Vue versions and bundlers.

web-framework serialization

npm install svg-vue

github ↗package ↗

INSTALL

IMPORT

SIG · SVG-VUE

svg-vue

web-frameworkjavascriptv0.2.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.

SvgVue

✓ import SvgVue from 'svg-vue';

✗ const SvgVue = require('svg-vue');

Primarily designed for ES modules context within a Vue CLI/Laravel Mix setup using Babel. CommonJS `require` is generally not used for Vue components in such setups.

SvgVue (global registration)

✓ import Vue from 'vue'; import SvgVue from 'svg-vue'; Vue.component('svg-vue', SvgVue);

✗ new Vue({ components: { SvgVue } }); // This is local registration, not global

For global availability across your Vue 2 application, register the component using `Vue.component()` before instantiating the root Vue app.

<svg-vue>

✓ <template> <svg-vue icon="my-icon"></svg-vue> </template>

✗ <template> <SvgVue icon="my-icon"></SvgVue> </template>

When used in templates, component names are typically kebab-case (e.g., `svg-vue`) even if imported as PascalCase (e.g., `SvgVue`). The `icon` prop refers to the name of the SVG asset processed by `laravel-mix-svg-vue`.

This quickstart demonstrates global registration of the `svg-vue` component and its usage within a Vue 2 template, including passing an `icon` prop and applying CSS classes. It also shows usage within a loop, emphasizing the importance of the `:key` attribute for dynamic lists.

/* main.js or app.js */ import Vue from 'vue'; import App from './App.vue'; import SvgVue from 'svg-vue'; // Register SvgVue globally (common practice for utility components in Vue 2) Vue.component('svg-vue', SvgVue); new Vue({ render: h => h(App), }).$mount('#app'); /* App.vue */ <template> <div id="app"> <h1>My Application</h1>  <p>Here's an icon:</p> <svg-vue icon="my-awesome-icon" class="icon-large text-blue-500"></svg-vue> <p>Another icon, potentially with a key for dynamic lists:</p> <div v-for="item in items" :key="item.id"> <svg-vue :icon="item.iconName"></svg-vue> <span>{{ item.text }}</span> </div> </div> </template> <script> export default { name: 'App', data() { return { items: [ { id: 1, iconName: 'dashboard', text: 'Dashboard' }, { id: 2, iconName: 'settings', text: 'Settings' } ] }; } }; </script> <style> .icon-large { width: 50px; height: 50px; } .text-blue-500 svg { fill: #3b82f6; /* Example of styling the inlined SVG */ } </style>

Debug

Known issues

breakingThis package is explicitly for Vue 2 applications and is incompatible with Vue 3+. Attempts to use it in a Vue 3 project will result in runtime errors due to fundamental API changes in Vue 3's component system and instance initialization.

fix

For Vue 3, consider modern alternatives like `vue-inline-svg` or `unplugin-svg-vue-component` which are designed for the Vue 3 composition API and Vite/Webpack 5 environments.

affects: All versions

gotchaThe `svg-vue` component relies entirely on the `laravel-mix-svg-vue` plugin for processing and making SVG assets available. If this Laravel Mix plugin is not correctly configured in your build process, the `svg-vue` component will not be able to find and render any SVGs.

fix

Ensure `laravel-mix-svg-vue` is installed and properly configured in your `webpack.mix.js` file, specifying the correct `svgPath` where your SVG files reside.

affects: All versions

deprecatedThe package `svg-vue` version `0.2.0` was last published over four years ago and appears to be abandoned. There will be no further updates, security patches, or compatibility fixes for newer versions of Vue, Laravel Mix, or underlying build tools.

fix

For new projects or existing projects requiring ongoing maintenance, it is strongly recommended to use a currently maintained SVG component solution that supports modern build tools and Vue versions. Migrate to an active alternative.

affects: All versions

gotchaWhen rendering multiple `<svg-vue>` components within a `v-for` loop, it is crucial to bind a unique `:key` attribute to each instance. Failure to do so can lead to unexpected rendering behavior, performance issues, or incorrect updates, as Vue's default reconciliation strategy will not correctly identify distinct component instances.

fix

Always add a unique `:key` attribute when using `v-for`. For example: `<svg-vue :icon="item.icon" :key="item.id"></svg-vue>`.

affects: All versions

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <svg-vue> - did you register the component correctly?

The `svg-vue` component was imported but not globally or locally registered with Vue, or it was registered after the Vue instance was created.

fix

Ensure you `import SvgVue from 'svg-vue';` and then globally register it with `Vue.component('svg-vue', SvgVue);` before `new Vue({ ... })`, or locally register it within the `components` option of a parent component.

Failed to resolve module specifier "svg-vue"

The `svg-vue` package is not installed or the import path is incorrect, or the bundler cannot find it.

fix

Run `npm install svg-vue` or `yarn add svg-vue`. Verify your `node_modules` directory contains `svg-vue` and your bundler configuration (e.g., Webpack/Laravel Mix) correctly resolves node modules.

Error: Cannot find module 'laravel-mix-svg-vue'

This error occurs in the context of Laravel Mix, indicating the companion plugin is missing, which `svg-vue` implicitly relies on for asset processing.

fix

Install the build-time plugin: `npm install laravel-mix-svg-vue --save-dev` or `yarn add laravel-mix-svg-vue --dev`. Then, ensure it's required and enabled in your `webpack.mix.js` file: `require('laravel-mix-svg-vue');` and `mix.svgVue();`.

Upgrade

Version history

0.2.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency as it's a Vue component, specifically Vue 2 given its last update date.

laravel-mix-svg-vuerequiredBuild-time companion plugin essential for processing SVGs that this component consumes. Without it, the component lacks its intended data source.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/danielstgt/svg-vue ↗

packagehttps://www.npmjs.com/package/svg-vue ↗