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.

$3

Check old version vue-inline-svg@2

[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

Install

$3

``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);
`




$3

`html





`




Usage

`html
src="image.svg"
transformSource="transformSvg"
@loaded="svgLoaded($event)"
@unloaded="svgUnloaded()"
@error="svgLoadError($event)"
width="150"
height="150"
fill="black"
aria-label="My image"
>
`
Example




$3


#### - src
Type: string Required

Path 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: string

Sets/overwrites the