vue-sprited-svg-loader

Simple svg sprite webpack loader for Vue to use .svg files as component. Based on svg-sprite-loader. With typescript support.

See Demo Example.

Install

Requires svg-sprite-loader as first loader.

npm i -D vue-sprited-svg-loader svg-sprite-loader

Webpack Loader

module: {
    rules: [
        {
            test: /\.svg$/,
            use: [
                'vue-sprited-svg-loader',
                'svg-sprite-loader'
            ]
        }
    ]
}

Usage

Script

import IconFirst from './icons/icon-1.svg';
import IconSecond from './icons/icon-2.svg';

export default {
    components: {
        IconFirst,
        IconSecond
    }
};

Template

<div class="icons-example">
    <IconFirst class="first-icon"/>
    <IconSecond :style="{ fill: 'currentColor', color: 'red' }"/>
</div>

Usage inside Slot

By default component has slot named icon.

VueButton.vue

<button class="button">
    <slot name="icon"></slot>
    <slot></slot>
</button>

App.vue

<VueButton>
    <IconFirst />
    Press Me
</VueButton>

Props

width: string | number

Append width to style in pixels.

<MyIcon width="24" />

height: string | number

Append height to style in pixels.

<MyIcon height="24" />

size: string | number

Append both width and height to style in pixels.

<MyIcon size="24" />

Options

[
    {
        loader: 'vue-sprited-svg-loader',
        options: {
            customClass: 'icon',
            slotName: 'icon'
        }
    },
    'svg-sprite-loader'
]

customClass: string = ''

Add custom class to component

<svg class="customClass"> ... </svg>

slotName: string = 'icon'

Add custom slot name to component

<svg slot="slotName"> ... </svg>