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.

$ npm install vue-simple-svg

in your Vue's main file,

import VueSimpleSVG from 'vue-simple-svg'
Vue.use(VueSimpleSVG)

and in your component,

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

• 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'

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

• enable applying various colors to multiple paths in an SVG

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