SVG fill , change SVG color with VUE

Hello , I have been tryng to change a color of a SVG , with fill , but it is not working . I am doing like this -

 <img :src="'/assets/images/image.svg " :fill="'#FFF'" class="imgicon">

I tryed ad welll to change in the css -

 div.imgicon {
        fill: green !important;
    }

But it didnt changed ,

Level 30

If order to use fill, you should open image.svg in a text editor, copy the content, and paste it to replace the whole img line.

Then the fill attribute could be applied to the <svg>

Otherwise, you can change it directly in the file if it suits you.

fill shouldn't be applied to an img.

Besides, no need for the colon when you are using a static value. :fill should be replaced with fill

The colon : is a shorthand for v-bind. Here you can find more information about v-bind: https://vuejs.org/v2/api/#v-bind

Level 10

@ismaile , there is any way that I can change the color of the svg withou change the image.svg with the editor ?

Best Answer

Level 30

@murilo You can use the filter attribute:

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

The following code should make your svg white:

 div.imgicon {
        filter: brightness(0) invert(1);
    }

2 likes

Level 10

Thanks @ismaile , It worked

Please or to participate in this conversation.