Svg Vue

A Laravel Mix extension to inline SVG files with Vue.js and automatically optimize them with SVGO.
latest v0.2.6 - released
279 downloads last week
MIT license
8 versions

Laravel Mix SVG Vue

Extension to inline SVG files with Vue.js and optimize them automatically with SVGO.


Install the extension:

npm install laravel-mix-svg-vue

Or if you prefer yarn:

yarn add laravel-mix-svg-vue

Next require the extension inside your Laravel Mix config and call svgVue() in your pipeline:

// webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')

The last step is to import and register the Vue component:

// e.g. app.js
import Vue from 'vue';
import SvgVue from 'svg-vue';



To display your SVG files, all you need to do is pass the filename (and path if placed inside a subdirectory) to the Vue component:

<!-- resources/svg/avatar.svg -->
<svg-vue icon="avatar"></svg-vue>

<!-- resources/svg/fontawesome/check.svg -->
<svg-vue icon="fontawesome/check"></svg-vue>

<!-- you can also use a "dot" notation as path -->
<svg-vue icon="fontawesome.check"></svg-vue>


Default options

If nothing is passed to the extension inside your Laravel Mix config, the following options will be used:

    svgPath: 'resources/svg',
    extract: false,
    svgoSettings: [
        { removeTitle: true },
        { removeViewBox: false },
        { removeDimensions: true }

Option details


The path to your SVG files relative to the Laravel Mix config.


If you wish to extract the SVG's to a separate file instead of including them in your main app.js, you can set this option to true. This will create a svg.js file which then needs to be loaded in your HTML. Make sure to load app.js before svg.js:

<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ mix('js/svg.js') }}"></script>


Determines which settings should be passed to SVGO. See here for a List of available settings.

Options overview

Option Type Default Description
svgPath String resources/svg Path to your SVG files
extract Boolean false Separate the SVG's from your main bundle
svgoSettings Array [{ removeTitle: true }, { removeViewBox: false }, { removeDimensions: true }] SVGO settings

Toggling icons or rendering inside lists

Not really related to SVG Vue, but when more than one <svg-vue> icon is rendered inside a conditional state with v-if or v-for, a key attribute should be used to tell Vue that an element needs to change when any condition changes.

While in most cases the cost for toggling elements with v-show should be preferred (also no need for a key attribute then), a simple example when toggling an icon with v-if inside a button could look like this:

<button v-if="active" key="active-btn">
    <svg-vue icon="active-icon" class="..."></svg-vue>

<button v-if="inactive" key="inactive-btn">
    <svg-vue icon="inactive-icon" class="..."></svg-vue>

Rendering lists could be handled like this:

    <li v-for="item in items" :key="">
        <p>{{ item.title }}</p>
        <svg-vue :icon="item.icon" class="..."></svg-vue>

Just remember the key has to be unique. More examples for this can be found in the Vue documentation.