Replace SVG images with inline SVG element
npm install vue-inline-svg



Vue component loads an SVG source dynamically and inline so you can manipulate the style of it with CSS or JS.
It looks like basic so you markup will not be bloated with SVG content.
Loaded SVGs are cached so it will not make network request twice.
[ci-img]: https://travis-ci.org/shrpne/vue-inline-svg.svg
[ci]: https://travis-ci.org/shrpne/vue-inline-svg
- Install
- NPM
- CDN
- Usage
- props
- src
- title
- uniqueIds
- uniqueIdsBase
- keepDuringLoading
- transformSource
- SVG attributes
- events
- loaded
- unloaded
- error
- Security Considerations
- SVGs from your project assets
- SVGs from third-party sources
- Comparison
- Changelog
- Contributing
- License
``bash`
npm install vue-inline-svg
Register locally in your component
`js
import InlineSvg from 'vue-inline-svg';
// Your component
export default {
components: {
InlineSvg,
}
}
`
Or register globally in the Vue app
`js
import { createApp } from 'vue'
import InlineSvg from 'vue-inline-svg';
const app = createApp({/.../});
app.component('inline-svg', InlineSvg);
`
`html
`
`html`
transformSource="transformSvg"
@loaded="svgLoaded($event)"
@unloaded="svgUnloaded()"
@error="svgLoadError($event)"
width="150"
height="150"
fill="black"
aria-label="My image"
>
Example
Type: string RequiredPath to SVG file
`html
`ℹ️ Note: if you are using assets not from
public directory, then you will need to import them with your bundler.Webpack: vue-loader or vue-cli will not handle paths like '../assets/my.svg' by file-loader automatically (like vue-cli do for
tag), so you will need to use it with require():Vite: You might like vite-plugin-require to enable
require() in Vite.`html
`
Learn more about static assets handling:
- vite: https://vite.dev/guide/assets.html
- webpack's vue-loader: https://vue-loader.vuejs.org/guide/asset-url.html#transform-rules
- vue-cli: https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
#### -
title
Type: stringSets/overwrites the
of the SVG`html
`
#### -
uniqueIds
Type: boolean | stringAdd suffix to all IDs in SVG to eliminate conflicts for multiple SVGs with the same source. If
true - suffix is random string, if string - suffix is this string.`html
`
#### -
uniqueIdsBase
Type: stringAn URL to prefix each ID in case you use the
tag and uniqueIds.`html
`
#### -
keepDuringLoading
Type: boolean; Default: trueIt 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.`html
`
#### -
transformSource
Type: (svg: SVGElement) => SVGElementFunction to transform SVG content
This example create circle in svg:
`html
`
$3
Other SVG and HTML attributes will be passed to inlined