内联svg需删除所有硬编码fill等颜色属性，仅保留viewbox等布局属性，并在标签设fill="currentcolor"以透传；外部svg（img）不支持currentcolor，应改用内联或引用；伪类变色需确保图标与触发元素同级嵌套，且父容器显式设置color。
内联SVG必须删掉所有硬编码fill属性
只要currentColor就永远不起作用——CSS里写的fill: currentColor会被内联属性高优先级覆盖。这不是bug，是CSS层叠规则本身。
- 逐个检查SVG源码，把所有
fill、stroke、fill-opacity等颜色相关属性全部删掉 - 如果SVG根
<svg></svg>标签上写了style="fill: inherit"，也得删，它反而会干扰透传 - 保留
viewBox、width、height等布局属性，只动颜色相关部分
fill="currentColor"要写在
写在<path></path>上容易漏，写在<svg></svg>上才真正省事：它会自动向下透传给所有子图形，除非某个<path></path>自己又写了fill覆盖。
- 推荐写法：
<svg width="16" height="16" viewbox="0 0 16 16" fill="currentColor"></svg> - 不推荐写法：
<path d="..." fill="currentColor"></path>（维护成本高，易遗漏） - 如果图标有描边，记得同时加
stroke="currentColor"，否则填色变了描边还是黑的
外部SVG（img标签）完全不支持currentColor
<img src="icon.svg">加载的是独立文档上下文，currentColor根本不可见。你改父元素color，它纹丝不动。
- 能用内联就别用
<img>——把SVG代码直接粘进HTML里 - 若必须用外部文件，改用
<use></use>引用SVG sprite，再配合.icon svg { fill: currentColor; } - 注意
<symbol></symbol>定义里也不能有fill，否则<use></use>会继承那个固定值
伪类变色时color必须设在触发元素上
.btn:hover { color: #28a745; }能生效，但前提是图标和文字在同一个元素里，或者图标包裹在该元素内部。如果图标单独放在兄弟节点，hover时它不会响应。
- 正确结构：
<button class="btn"><svg>...</svg>按钮文本</button> - 错误结构：
<button class="btn">按钮文本</button><svg>...</svg>（svg没被hover影响） - 伪元素如
::before也要显式写color: currentColor，它默认不继承color
color，currentColor就取浏览器默认值（通常是黑色），不是透明也不是空。哪怕只是color: inherit;，也比什么都不写强。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
