Change svg color in vue.js

#StandWithUkraine

Today, 18th May 2022, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

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

Change svg color in vue.js

May 05, 2017

by Ivan Borshchov

Did it help you?

Yes !

Best related

Using painterro with Vue.js

How to generate a webfont [automated setup]

Fix vuex requires a Promise polyfill in this browser