vue项目中img使用svg图片修改颜色

需求：就是左边是文字，右边是文字，中间是一个箭头图片

前言：抛开vue项目已经封装好了svg的组件这种来讲，封装的可以直接使用color来进行改变颜色，然后这里讲下没有封装的写法

1：首先改svg图片的颜色，可以直接使用**fill=“想要的颜色”**来修改颜色。然后我这个需要点击修改颜色，是动态的，写死只满足一种情况。

// svg图片中  
fill="red"  // 你想要的颜色

2：然后去网上找，主流的就是这个了，将fill改为currentColor， 然后通过继承父元素color属性可以改变颜色。（但是这种貌似不支持img引入的图片，所以还是没效果）

// svg图片中  
fill="currentColor"
// vue页面中, 你要改的那个svg图片的类名，使用fill改颜色即可
.svg-icon{
	fill:red;
}

3：然后功夫不负有心人，找到了这个，查了一下drop-shadow是添加一个可以修改颜色的阴影，然后直接cv，效果如下

  <div class="svg">
       <img src="./firefox-logo.svg" class="svg-color">
   </div>

//css
.svg {
  width: 30px;
  height: 30px;
  overflow: hidden;
}
.svg-color {
  transform: translateX(30px);
  filter: drop-shadow(#ff0000 -30px 0px 0px);
}

4：看着英文这两个字，就红框框住的地方，第3步的时候说了，drop-shadow是一个投影，这个就是投影出来的结果，就如果你是一张单独的图片，可以直接使用overflow：hidden将这个投影隐藏，但是这里我试过了，不能隐藏，然后我想到因为选中的是白色的，往上能不能行，因为图片默认我是蓝色的，选中后改为白色嘛，刚好背景色也是白色，改成了如下效果:使用y轴投影，但是由于蓝色和白色重叠了，导致颜色很淡，还是没啥用

.svg-icon{
	transform: translateY(0px);
    filter: drop-shadow(#ffffff 0px 0px 0px);
}

5：最后，抛弃了在vue文件中改变颜色img图片的想法，由于我是点击事件，点击的时候有下标，所以我就将这种图片改为了蓝色和白色两张图片，使用下标判断显示那张图片即可。效果是有了，但是差强人意，麻烦有更好的思路私聊一下我。这里写下自己的思路，记录一下。

// 伪代码
<span v-if="index== 0">
	中文 <img src="@/assets/蓝色图片.svg" v-if="index != 选中的下标" style="position:relative; top:-10px;" /><img v-else src="@/assets/白色图片.svg" style="position:relative; top:-10px;" /> 英文
</span>
 <span v-if="index== 1">
	英文 <img src="@/assets/蓝色图片" v-if="index != 选中的下标" style="position:relative; top:-10px;" /><img v-else src="@/assets/白色图片.svg" style="position:relative; top:-10px;" /> 中文
</span>