currentColor 是 CSS 中代表元素当前 color 计算值的关键字，能使 SVG 或字体图标自动继承父级文字颜色；需通过 CSS 设置 fill: currentColor 且避免内联颜色覆盖、外部 SVG 引用及 color: transparent 等失效场景。
currentColor 是什么，为什么能自动同步颜色
currentColor 是 CSS 中一个特殊的关键字值，它代表元素当前的 color 计算值。只要图标的渲染方式支持继承文本颜色（比如用 <svg> 内联书写 + fill: currentColor，或使用字体图标如 Font Awesome 的 fa 类），就能自动跟随父级文字颜色变化，无需手动维护多套色值。
SVG 图标用 currentColor 填充路径
内联 SVG 是最可控的方式。关键点是：不能把 fill 写死在 <path> 上，而要通过 CSS 控制；且 SVG 必须设为 display: inline-block 或类似行为，避免脱离文本流导致 color 继承失效。
- 确保 SVG 根元素没有
fill、stroke等硬编码颜色属性 - 用 CSS 设置
svg { fill: currentColor; }或更精确地svg.icon { fill: currentColor; } - 如果 SVG 有多个子元素（如
<g>、<path>），它们会继承fill值，但前提是没被子级显式覆盖
svg.icon {
fill: currentColor;
width: 1em;
height: 1em;
vertical-align: -0.125em;
}
<span style="color: #3498db;">
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
提交
</span>
字体图标（如 IconFont / FontAwesome）如何触发 currentColor
多数现代字体图标库默认支持 currentColor，但依赖两个前提：一是图标元素本身是行内元素（如 <i>），二是没有在类中强制写死 color。例如 Font Awesome 6 默认启用 color: inherit，所以只要父容器设了 color，图标就跟着变。
- 检查是否意外加了
style="color: #xxx"或自定义 CSS 覆盖了继承 - 避免对图标元素单独设置
color，否则会切断继承链 - 若用 IconFont 自定义字体，确保
@font-face中未禁用font-display导致渲染异常（极少见，但可能影响 color 解析）
容易忽略的坑：currentColor 不生效的常见原因
不是所有图标载体都天然响应 currentColor。下面这些情况会导致“明明写了却没变色”：
立即学习“前端免费学习笔记（深入）”；
-
<img src="icon.svg">：外部 SVG 不参与 CSS 继承，currentColor完全无效 - SVG 中
<path fill="#000">硬编码了颜色，CSS 的fill: currentColor会被内联样式优先级压制 - 父级设置了
color: transparent，图标虽“同步”，但结果是看不见 —— 检查 computed color 是否真为你预期的值 - 使用伪元素
::before插入图标时，没给伪元素设color: inherit，导致它拿不到父级 color
调试建议：在开发者工具中选中图标元素，看 Computed 面板里的 color 和 fill 值是否一致，以及 color 来源是不是你期望的层级。
