vue-simple-svg (V3)

A simple Vue.js plugin that allows you to use a component that dynamically loads a .svg file as an inline SVG so you can easily control its style programmatically. No jQuery required.

I recommend using vue-svg-loader for many cases when you just need to load a SVG file as a component. This plugin is built to cover some other cases the library doesn't fit, which are:

• loading a SVG file dynamically. You don't have to hardcode the filename in the source code. Instead you can specify it at rendering time or change it even after the component is rendered.
• changing fill color or stroke color of the SVG programmatically with ease and no global css usage.

Installation:

$ npm install vue3-simple-svg

or

$ yarn add vue3-simple-svg

Usage:

1. initialize in your main file,

import { createApp } from 'vue'
// as a plugin
import VueSimpleSVG from 'vue3-simple-svg'

createApp({}).use(VueSimpleSVG).mount('#app')


// or as a component
import {SimpleSVG} from 'vue3-simple-svg'
app.component('simple-svg', SimpleSVG)

2. specify which elements in the SVG will be manipulated their fill and stroke colors by setting dedicated class names to them

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <path class="fill-to-change" d="XXXXX XXXXX XXXXX" />
    <path class="stroke-to-change" d="XXXXX XXXXX XXXXX" />
  </g>
</svg>

3. and use it in your component,

<simple-svg
  :src="svgSrc"
  fill-class-name="fill-to-change"
  :fill="svgFillColor"
  stroke-class-name="stroke-to-change"
  :stroke="svgFillColor"
  width="100%"
  height="100%"
  custom-id="my-id"
  custom-class-name="my-class"
  @load="svgLoaded()"
/>

Available props and events:

| props | type | description | default | | ------ | ------ | ------ | ------ | | src | string | path to your SVG file | *required | | fillClassName | string | class name set to the elements in your SVG file whose fill color you want to change | '' | | fill | string | CSS-valid fill color value | '' | | strokeClassName | string | class name set to the elements in your SVG file whose stroke color you want to change | '' | | stroke | string | CSS-valid stroke color value | '' | | width | string | root SVG element's style width | 'auto' | | height | string | root SVG element's style height | 'auto' | | customId | string | root SVG element's id | '' | | customClassName | string | root SVG element's class | '' |

| events | description | | ------ | ------ | | @load | called when the inline SVG is generated |

Notes:

• To generate the inline SVG properly, you need to manually clean up and edit your SVG files beforehand. Tips: remove all hardcoded inline styles and unnecessary attributes, especially the ones specifying colors.

Demo:

To run demo in your local environment,

$ npm run dev-demo

You can see the example of how to use simple-svg component at demo/components/SvgButton.vue

Reference:

• Loading a SVG with XMLHttpRequest and DOMParser https://github.com/jonnyhaynes/inline-svg
• Parsing inline svg tags https://github.com/MMF-FE/vue-svgicon

Credits

Thanks to Seiya Kobayashi for the vue 2 version. Salute!