vue-inline-svg

Vue Inline SVG

Vue component loads an SVG source dynamically and inline <svg> so you can manipulate the style of it with CSS or JS. It looks like basic <img> so you markup will not be bloated with SVG content. Loaded SVGs are cached so it will not make network request twice.

Install

NPM

npm install vue-inline-svg

Register locally in your component

import InlineSvg from 'vue-inline-svg';

// Your component
export default {
    components: {
        InlineSvg,
    }
}

Or register globally in the root Vue instance

import Vue from 'vue';

// as a plugin
import {InlineSvgPlugin} from 'vue-inline-svg';
Vue.use(InlineSvgPlugin);

// or as a component
import InlineSvg from 'vue-inline-svg';
Vue.component('inline-svg', InlineSvg);

CDN

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Include the `vue-inline-svg` script on your page after Vue script -->
<script src="https://unpkg.com/vue-inline-svg"></script>

<script>
// Register as a plugin
Vue.use(VueInlineSvg.InlineSvgPlugin);

// or as a component
Vue.component('inline-svg', VueInlineSvg.InlineSvgComponent);

new Vue({
// ...
});
</script>

Usage

<inline-svg 
    src="image.svg" 
    @loaded="svgLoaded()"
    @unloaded="svgUnloaded()"
    @error="svgLoadError()"
    width="150" 
    height="150"
    fill="black"
    aria-label="My image"
></inline-svg>

Example

props

src

path to SVG file

Other attributes will be passed to inlined <svg>

events

loaded

called when image is loaded and inlined

unloaded

called when src prop was changed and another svg start loading

error

called when svg failed to load

Comparison

• This module: 1.3 kB minified
• vue-simple-svg: 21KB minified, does not cache network requests, has wrapper around svg, attrs passed to <svg> are limited, converts <style> tag into style="" attr

License

MIT License

Changelog

1.0.0 - 2019-03-17

• Initial release