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" }, 

Run:

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 add CSS:

.wclose { color: #ccc; } 
.wclose:hover { color: yellow; } 

More options here https://www.npmjs.com/package/vue-svgicon

Best related

Using painterro with Vue.js

#painterro #vuejs

How to generate a webfont [automated setup]

#webfont #css #svg #react #vuejs

Fix vuex requires a Promise polyfill in this browser

#vuejs