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