vue-simple-svg

A simple Vue.js plugin that allows you to use a component that loads a .svg image as an inline SVG so you can easily control its fill color from the parent component. No jQuery required.

Installation:

$ npm install vue-simple-svg

Usage:

initialize in your Vue's main file,

// as a plugin
import VueSimpleSVG from 'vue-simple-svg'
Vue.use(VueSimpleSVG)

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

and use in your component,

<simple-svg
  :filepath="'/PATH_/TO_/YOUR_/FILE.svg'"
  :fill="getFillColor"
  :stroke="getStrokeColor"
  :width="'400px'"
  :height="'400px'"
  :id="'custom-id'"
  @ready="onSvgReady()"
  />

Available props and events:

props	type	description	default
filepath	string	path to your svg file
fill	string	svg's fill color	'black'
stroke	string	svg's stroke color	'black'
width	string	svg's width	'1em'
height	string	svg's height	'1em'
id	string	custom color	''

events	description
@ready	called when the svg is loaded

Notes:

• inline svg element has a class '.simple-svg'
• inline svg has a div wrapper with a class '.simple-svg-wrapper'
• fill/stroke style set to a path of a SVG will be removed unless its value is 'none'

Demo:

To run demo in your local environment,

$ npm run dev-demo

You can find the code of an example component that has a simple-svg component as its child in demo/components/SvgButton.vue

Todo:

• enable applying various colors to multiple paths in an SVG

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