npm install vue-svg-filler --save

import SvgFiller from 'vue-svg-filler'

Vue.component('svg-filler', SvgFiller)

<svg-filler path="static/PATH/OF/YOUR/FILE.svg"/>

<svg-filler path="static/github.svg"/>

<svg-filler path="static/icon/bitcoin.svg" fill="#FF9900" width="50px" height="50px"/>

<template>
  <div>
    <svg-filler path="static/icon/palette.svg"
      :fill="svgPalette.fill"
      :width="svgPalette.width"
      :height="svgPalette.height"
      @click="svgPalette.fill = randomColor()"/>
    <h2 :style="{ 'color': svgPalette.fill }">{{ svgPalette.fill }}</h2>
    <span>Click icon for change color</span>
  </div>
</template>

<script>
import SvgFiller from 'vue-svg-filler'

export default {
  name: 'app',
  data () {
    return {
      svgPalette: {
        fill: '#c2f91d',
        width: '150px',
        height: '150px'
      }
    }
  },
  methods: {
    randomColor () {
      return `#${(Math.random()*0xFFFFFF<<0).toString(16)}`
    }
  },
  components: {
    SvgFiller
  }
}
</script>

<template>
  <div>
    <svg-filler path="static/vuejs.svg"
      :hover-color="svgVuejs.hoverColor"
      :fill="svgVuejs.fill"
      :width="svgVuejs.width"
      :height="svgVuejs.height"/>
    <div>Hover me !</div>
  </div>
</template>

<script>
import SvgFiller from 'vue-svg-filler'

export default {
  name: 'app',
  data () {
    return {
      svgVuejs: {
        fill: this.randomColor(),
        width: '150px',
        height: '150px',
        hoverColor: this.randomColor()
      }
    }
  },
  components: {
    SvgFiller
  }
}
</script>

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build