currentColor 是 CSS 关键字，用于继承元素的 color 值。通过将 SVG 的 fill 或其他颜色属性设为 currentColor，可使图标自动跟随文字颜色，适用于主题切换、按钮状态等场景，提升样式维护效率。
在网页开发中，让CSS图标与文字颜色保持一致，可以使用 currentColor 这个CSS关键字。它能自动继承当前元素的 color 值，无需重复定义颜色，提升样式维护效率。
什么是 currentColor？
currentColor 是一个 CSS 关键字，表示当前元素的 color 属性值。它可以被用在任何支持颜色值的属性中，比如 fill、stroke、border-color 等。
这意味着，只要设置元素的文本颜色，图标（如 SVG 图标）就能自动跟随这个颜色。
如何用 currentColor 绑定图标颜色？
以下是一些常见场景的操作方式：
立即学习“前端免费学习笔记（深入）”；
• 使用内联 SVG 图标将 SVG 内嵌在 HTML 中，并设置其 fill="currentColor"：
<p style="color: #0066cc;">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0L10 5H15L11 8L12 13L8 10L4 13L5 8L1 5H6L8 0Z"/>
</svg>
我是蓝色文字和图标
</p>
此时 SVG 图标会继承 color: #0066cc，显示为蓝色。
字体图标本质是文字，天生跟随 color。但如果你用的是 SVG 版本的图标组件，仍需设置 fill：
<i style="color: green;"> <svg class="icon" fill="currentColor" width="16" height="16">...</svg> 成功状态 </i>• 在 CSS 中统一控制
你也可以在样式表中预设图标的 fill 值：
.icon {
fill: currentColor;
width: 16px;
height: 16px;
}
.text-red {
color: red;
}
这样，无论文字颜色如何变化，图标都会同步。
适用场景与优势
这种做法特别适合：
- 主题切换系统（深色/浅色模式）
- 按钮不同状态（默认、悬停、禁用）
- 减少 CSS 变量或重复代码
只需改 color，图标自动适配，样式更简洁，维护更方便。
基本上就这些。用 currentColor 能轻松实现图标与文字颜色一致，是现代前端开发中的实用技巧。不复杂但容易忽略。
