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.
Check old version vue-inline-svg@2
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 Vue app
import { createApp } from 'vue'
import InlineSvg from 'vue-inline-svg';
const app = createApp({/*...*/});
app.component('inline-svg', InlineSvg);
<script src="https://unpkg.com/vue"></script>
<!-- Include the `vue-inline-svg` script on your page after Vue script -->
<script src="https://unpkg.com/vue-inline-svg"></script>
<script>
const app = Vue.createApp({/*...*/});
app.component('inline-svg', VueInlineSvg);
</script>
<inline-svg
src="https://github.com/shrpne/vue-inline-svg/raw/master/image.svg"
transformSource="transformSvg"
@loaded="svgLoaded($event)"
@unloaded="svgUnloaded()"
@error="svgLoadError($event)"
width="150"
height="150"
fill="black"
aria-label="My image"
></inline-svg>
src
Path to SVG file
<inline-svg src="https://github.com/shrpne/vue-inline-svg/raw/master/my.svg"/>
Note: if you use vue-loader assets or vue-cli, then paths like '../assets/my.svg' will not be handled by file-loader automatically like vue-cli do for <img>
tag, so you will need to use it with require
:
<inline-svg :src="https://github.com/shrpne/vue-inline-svg/raw/master/require('../assets/my.svg')"/>
Learn more:
title
Sets/overwrites the <title>
of the SVG
<inline-svg :src="https://github.com/shrpne/vue-inline-svg/raw/master/image.svg" title="My Image"/>
keepDuringLoading
true
by default. It makes vue-inline-svg to preserve old image visible, when new image is being loaded. Pass false
to disable it and show nothing during loading.
<inline-svg :src="https://github.com/shrpne/vue-inline-svg/raw/master/image.svg" :keepDuringLoading="false"/>
transformSource
Function to transform SVG source
This example create circle in svg:
<inline-svg :src="https://github.com/shrpne/vue-inline-svg/raw/master/image.svg" :transformSource="transform"/>
<script>
const transform = (svg) => {
let point = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
point.setAttributeNS(null, 'cx', '20');
point.setAttributeNS(null, 'cy', '20');
point.setAttributeNS(null, 'r', '10');
point.setAttributeNS(null, 'fill', 'red');
svg.appendChild(point);
return svg;
}
// For cleaner syntax you could use https://github.com/svgdotjs/svg.js
</script>
Other SVG and HTML attributes will be passed to inlined <svg>
. Except attributes with false
or null
value.
<!-- input -->
<inline-svg
fill-opacity="0.25"
:stroke-opacity="myStrokeOpacity"
:color="false"
></inline-svg>
<!-- output -->
<svg fill-opacity="0.25" stroke-opacity="0.5"></svg>
loaded
Called when SVG image is loaded and inlined. Inlined SVG element passed as argument into the listener’s callback function.
<inline-svg @loaded="myInlinedSvg = $event"/>
unloaded
Called when src
prop was changed and another SVG start loading.
<inline-svg @unloaded="handleUnloaded()"/>
error
Called when SVG failed to load. Error object passed as argument into the listener’s callback function.
<inline-svg @error="log($event)"/>
<svg>
are limited, converts <style>
tag into style=""
attrMIT License