如何用CSS的currentColor控制SVG图标颜色？

内联SVG需删除所有硬编码fill等颜色属性，仅保留viewBox等布局属性，并在<svg>标签设fill="currentColor"以透传；外部SVG（img）不支持currentColor，应改用内联或<use>引用；伪类变色需确保图标与触发元素同级嵌套，且父容器显式设置color。

内联SVG必须删掉所有硬编码fill属性

只要这类内联fill还存在，currentColor就永远不起作用——CSS里写的fill: currentColor会被内联属性高优先级覆盖。这不是bug，是CSS层叠规则本身。

1. 逐个检查SVG源码，把所有fill、stroke、fill-opacity等颜色相关属性全部删掉
2. 如果SVG根<svg>标签上写了style="fill: inherit"，也得删，它反而会干扰透传
3. 保留viewBox、width、height等布局属性，只动颜色相关部分

fill="currentColor"要写在<svg>标签上，不是<path>

写在<path>上容易漏，写在<svg>上才真正省事：它会自动向下透传给所有子图形，除非某个<path>自己又写了fill覆盖。

1. 推荐写法：<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
2. 不推荐写法：<path d="..." fill="currentColor">（维护成本高，易遗漏）
3. 如果图标有描边，记得同时加stroke="currentColor"，否则填色变了描边还是黑的

外部SVG（img标签）完全不支持currentColor

<img src="icon.svg">加载的是独立文档上下文，currentColor根本不可见。你改父元素color，它纹丝不动。

1. 能用内联就别用<img>——把SVG代码直接粘进HTML里
2. 若必须用外部文件，改用<use>引用SVG sprite，再配合.icon svg { fill: currentColor; }
3. 注意<symbol>定义里也不能有fill，否则<use>会继承那个固定值

伪类变色时color必须设在触发元素上

.btn:hover { color: #28a745; }能生效，但前提是图标和文字在同一个元素里，或者图标包裹在该元素内部。如果图标单独放在兄弟节点，hover时它不会响应。

1. 正确结构：<button class="btn"><svg>...</svg>按钮文本</button>
2. 错误结构：<button class="btn">按钮文本</button><svg>...</svg>（svg没被hover影响）
3. 伪元素如::before也要显式写color: currentColor，它默认不继承color

最常被忽略的一点：父容器没设color，currentColor就取浏览器默认值（通常是黑色），不是透明也不是空。哪怕只是color: inherit;，也比什么都不写强。