svg图片颜色

问题描述

svg标签由于图标自身属性fill、stroke、background等设置了固定颜色，当使用color属性控制图标颜色时失效。

解决方案

1.将svg图标拖入vscode中

2.右键点击svg图标，选择打开方式，左键选择文本编辑器

3.将svg图片里的fill、stroke、background等属性按需改为currentColor

4.使用类选择器单独控制颜色

<style>
.icon {
  color: green;
}
.icon:hover {
  color: blue;
}
</style>

<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
  <path d="M12 2L15 8H9L12 2Z" />
</svg>