{"id":12106,"library":"svg-vue","title":"SVG Vue Component","description":"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.","status":"abandoned","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/danielstgt/svg-vue","tags":["javascript","laravel mix","svg-vue","component"],"install":[{"cmd":"npm install svg-vue","lang":"bash","label":"npm"},{"cmd":"yarn add svg-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add svg-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as it's a Vue component, specifically Vue 2 given its last update date.","package":"vue","optional":false},{"reason":"Build-time companion plugin essential for processing SVGs that this component consumes. Without it, the component lacks its intended data source.","package":"laravel-mix-svg-vue","optional":false}],"imports":[{"note":"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.","wrong":"const SvgVue = require('svg-vue');","symbol":"SvgVue","correct":"import SvgVue from 'svg-vue';"},{"note":"For global availability across your Vue 2 application, register the component using `Vue.component()` before instantiating the root Vue app.","wrong":"new Vue({\n  components: { SvgVue }\n}); // This is local registration, not global","symbol":"SvgVue (global registration)","correct":"import Vue from 'vue';\nimport SvgVue from 'svg-vue';\n\nVue.component('svg-vue', SvgVue);"},{"note":"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`.","wrong":"<template>\n  <SvgVue icon=\"my-icon\"></SvgVue>\n</template>","symbol":"<svg-vue>","correct":"<template>\n  <svg-vue icon=\"my-icon\"></svg-vue>\n</template>"}],"quickstart":{"code":"/* main.js or app.js */\nimport Vue from 'vue';\nimport App from './App.vue';\nimport SvgVue from 'svg-vue';\n\n// Register SvgVue globally (common practice for utility components in Vue 2)\nVue.component('svg-vue', SvgVue);\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app');\n\n/* App.vue */\n<template>\n  <div id=\"app\">\n    <h1>My Application</h1>\n    <!-- Renders 'my-awesome-icon.svg' found in your configured SVG path -->\n    <p>Here's an icon:</p>\n    <svg-vue icon=\"my-awesome-icon\" class=\"icon-large text-blue-500\"></svg-vue>\n\n    <p>Another icon, potentially with a key for dynamic lists:</p>\n    <div v-for=\"item in items\" :key=\"item.id\">\n      <svg-vue :icon=\"item.iconName\"></svg-vue>\n      <span>{{ item.text }}</span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      items: [\n        { id: 1, iconName: 'dashboard', text: 'Dashboard' },\n        { id: 2, iconName: 'settings', text: 'Settings' }\n      ]\n    };\n  }\n};\n</script>\n\n<style>\n.icon-large {\n  width: 50px;\n  height: 50px;\n}\n.text-blue-500 svg {\n  fill: #3b82f6; /* Example of styling the inlined SVG */\n}\n</style>","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"All versions"},{"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.","message":"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.","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"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.","severity":"deprecated","affected_versions":"All versions"},{"fix":"Always add a unique `:key` attribute when using `v-for`. For example: `<svg-vue :icon=\"item.icon\" :key=\"item.id\"></svg-vue>`.","message":"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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"[Vue warn]: Unknown custom element: <svg-vue> - did you register the component correctly?"},{"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.","cause":"The `svg-vue` package is not installed or the import path is incorrect, or the bundler cannot find it.","error":"Failed to resolve module specifier \"svg-vue\""},{"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();`.","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.","error":"Error: Cannot find module 'laravel-mix-svg-vue'"}],"ecosystem":"npm"}