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

Change svg color in vue.js

#vuejs
16
Ivan Borshchov profile picture
May 05, 2017
by Ivan Borshchov
Did it help you?
Yes !
No

Best related

Using painterro with Vue.js

Using painterro with Vue.js

#painterro #vuejs
How to generate a webfont [automated setup]

How to generate a webfont [automated setup]

#webfont #css #svg #react #vuejs
i18n in Vue3 with locale messages in single file components

i18n in Vue3 with locale messages in single file components

#vuejs #vue3
Fix vuex requires a Promise polyfill in this browser

Fix vuex requires a Promise polyfill in this browser

#vuejs
reCAPTCHA with

reCAPTCHA with Vue.js example

#recaptcha #vuejs
Load files

Load files to into application without backend in Vue

#vuejs #javascript
How to

How to include jQuery into Vue.js

#jquery #eslint #vuejs

Other by Ivan Borshchov

Simple way to Docker on Windows 10 home with WSL 2

Simple way to Docker on Windows 10 home with WSL 2

#wsl #docker
How your website will be hacked if you have no CSRF protection

How your website will be hacked if you have no CSRF protection

#csrf #security
Extend EC2 ext3 filesystem

Extend EC2 ext3 filesystem

#aws #ec2 #resize2fs
Has been blocked by cors policy [Explain like I am 5]

Has been blocked by cors policy [Explain like I am 5]

#security #cors
How to reset mysql root password on ubuntu

How to reset mysql root password on ubuntu

#mysql
Flask vs django | easy expert comparison

Flask vs django | easy expert comparison

#python #django #flask
The fastest way to clean up disk space on server

The fastest way to clean up disk space on server

#ops #devops #disk-space-optimization
Fix django.db.utils.operationalerror: fe_sendauth: no password supplied

Fix django.db.utils.operationalerror: fe_sendauth: no password supplied

#django #postgresql
CSS Basics – everything you need to know

CSS Basics – everything you need to know

#css
Fast upload file to AWS S3 from scratch

Fast upload file to AWS S3 from scratch

#aws #s3