Change svg color in vue.js

Place all svg files/icons to one dir, e.g. <root-dir>/static/svg/

Install vue-svgicon:

npm install vue-svgicon --save-dev

Add to package.json scripts:

"scripts": {
  "gensvg": "vsvg -s ./static/svg/ -t ./src/icons"


npm run gensvg

Add next to main.js:

import svgicon from 'vue-svgicon'

Vue.use(svgicon, {
    tagName: 'svgicon'

In components/Comp.vue file scripts section:

import '../icons'

In .vue html:

<div id="wclose">
  <svgicon icon="close-icon" width="50" height="50"></svgicon>   


.wclose {
  color: #ccc;

.wclose:hover {
  color: yellow;

More options here

menu 16
Ivan Borshchov profile picture
May 05, 2017
by Ivan Borshchov

Best related

Other by Ivan Borshchov