SVG Vue Component

0.2.0 · abandoned · verified Sun Apr 19

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.

Common errors

```
[Vue warn]: Unknown custom element: <svg-vue> - did you register the component correctly?
```
cause 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"
```
cause 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'
```
cause 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();`.

Warnings

breaking This 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.
gotcha The `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.
deprecated The 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.
gotcha When 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>`.

Install

npm install svg-vue npm
yarn add svg-vue yarn
pnpm add svg-vue pnpm

Imports

SvgVue
wrong:
```
const SvgVue = require('svg-vue');
```
correct:
```
import SvgVue from '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)
wrong:
```
new Vue({
  components: { SvgVue }
}); // This is local registration, not global
```
correct:
```
import Vue from 'vue';
import SvgVue from 'svg-vue';

Vue.component('svg-vue', SvgVue);
```
For global availability across your Vue 2 application, register the component using `Vue.component()` before instantiating the root Vue app.
<svg-vue>
wrong:
```
<template>
  <SvgVue icon="my-icon"></SvgVue>
</template>
```
correct:
```
<template>
  <svg-vue icon="my-icon"></svg-vue>
</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`.

Quickstart

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>
    <!-- Renders 'my-awesome-icon.svg' found in your configured SVG path -->
    <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>

view raw JSON →