currentColor 可实现图标颜色自动跟随文字颜色，前提是元素有生效的 color 值且 fill 或 color 属性设为 currentColor；它取自身最终计算出的 color，非父级继承值，IE9+ 全支持但旧 Safari 在 box-shadow/渐变中可能失效。
直接结论：用 currentColor 就能实现图标颜色自动跟随文字颜色，但必须满足两个前提：元素有生效的 color 值，且图标的颜色属性（如 fill 或 color）被正确设置为 currentColor。
为什么 currentColor 不总是“继承父级 color”？
它取的是当前元素自身最终计算出的 color 值，不是父级的。哪怕这个值来自继承链、浏览器默认（rgb(0, 0, 0)），甚至 CSS 变量展开后，currentColor 都会同步更新。
常见误解是“没设 color 就不会变色”——错。只要父级有 color 且未被重置（比如没写 color: unset），子元素就会继承并让 currentColor 生效。
- 如果
span没显式设color，又没被任何祖先影响，它的color是浏览器默认黑，currentColor就是黑 - 如果祖先用了
color: transparent，那currentColor也是透明，图标可能“消失” -
currentColor在 IE9+ 全支持，但旧版 Safari 对box-shadow或渐变里用它可能不生效（border-color和fill没问题）
SVG 内联图标怎么填色才真正同步？
关键在两处：HTML 层的 fill="currentColor"（字符串！大小写敏感），和 CSS 层的 fill: currentColor（仅当 SVG 被当作 CSS 选择器目标时才起作用）。
立即学习“前端免费学习笔记（深入）”；
错误写法：<path fill="#333"> —— 硬编码覆盖了 currentColor；<svg style="fill: currentColor"> —— 这样写无效，因为内联 SVG 的 fill 属性只认字符串值。
- 正确写法：
<svg><path fill="currentColor" d="M0 0h24v24H0z"/></svg> - 必须确保包裹 SVG 的容器（比如
<span class="icon">）设置了color，否则 SVG 根节点没color可继承 - 如果 SVG 是外部文件（
<img src="icon.svg">），currentColor不生效——只能用内联或use引用符号
字体图标（iconfont）如何用 currentColor？
字体图标本质是文字，所以直接对图标元素设 color: currentColor 没意义——它本来就是继承父级 color 的。真正要做的，是确保图标元素本身参与颜色继承链。
- 别写
.icon { color: #007bff; }然后另起一行.icon::before { color: currentColor; }—— 多余 - 只需统一控制父容器的
color，比如button { color: var(--text-primary); }，图标自然跟着变 - 如果图标用了伪元素生成（
::before），且内容是 Unicode 字符，那它本就继承color，无需额外设currentColor - 注意：某些 iconfont 库默认设了
color: inherit，此时你改父级color就够了
最容易被忽略的一点：SVG 的 fill 默认值是 none，不是 currentColor。哪怕你写了 fill="currentColor"，如果父容器没 color，它还是透明——不是“没颜色”，而是“继承了一个透明或未定义的颜色”。检查 computed styles 里的 color 值，比猜更可靠。
