Change SVG color in Vue

Question

I have this static existing svg that I have difficulties changing the color.

<img class="icon-shop" src="@/assets/icon-shop.svg"/>


<style>
.icon-shop {
  width: 32px;
  fill: orange;
  stroke: orange;
}
</style>

I've found a solution using filter attribute but it shouldn't be this complicated.

filter: invert(35%) sepia(36%) saturate(7009%) hue-rotate(2deg)
    brightness(104%) contrast(88%);

You can't style svg like that, you need to display it inline to be able to target it with css. — prettyInPink, Mar 16 '22 at 06:54
you should be able to open the svg file on any text editor and you can edit it by changing the there are some instances that you will see some tags like circle, polygon etc. there you should be able to edit the color. — Crystal, Mar 16 '22 at 06:54

score 0 · Answer 1 · answered Mar 16 '22 at 06:59

Sample is this if you change the fill="YOUR COLOR" that should change. You can view any svg on any text editor and change from there.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="300.000000pt" height="300.000000pt" viewBox="0 0 300.000000 300.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.10, written by Peter Selinger 2001-2011
</metadata>
<g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)"
fill="red" stroke="none">
<path d="M212 2613 c-128 -45 -197 -230 -142 -376 26 -70 122 -200 188 -255
39 -33 219 -160 962 -678 41 -28 104 -67 140 -85 58 -30 74 -34 145 -34 74 0
85 3 150 39 39 21 165 104 280 185 116 81 341 239 502 350 217 151 310 221
361 275 108 114 152 208 153 328 1 119 -63 215 -171 253 -37 13 -209 15 -1284
14 -1087 0 -1246 -2 -1284 -16z"/>
<path d="M50 1228 c0 -745 -2 -723 72 -798 22 -23 58 -50 81 -61 40 -18 87
-19 1297 -19 l1255 0 50 24 c55 25 105 76 132 134 16 34 18 95 21 705 2 367 0
667 -3 667 -3 0 -34 -24 -69 -54 -36 -30 -106 -83 -158 -117 -160 -107 -596
-411 -753 -523 -304 -219 -447 -257 -656 -175 -88 36 -129 62 -546 355 -142
99 -337 234 -433 300 -96 65 -200 143 -232 173 l-58 53 0 -664z"/>
</g>
</svg>

Change SVG color in Vue

1 Answers1