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>. Except attributes with false or null value.

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.5 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.1.3 - 2019-09-06

• Fixed: don't fail on invalid SVG file parse
• Fixed: update component attrs now correctly launch component rerender
• Refactor: don't patch innerHTML manually, but use render function's domProps
• Add: emit Error on error