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"：
我是蓝色文字和图标
此时 SVG 图标会继承 color: #0066cc，显示为蓝色。
• 使用字体图标（如 Font Awesome）
字体图标本质是文字，天生跟随 color。但如果你用的是 SVG 版本的图标组件，仍需设置 fill：
成功状态• 在 CSS 中统一控制
你也可以在样式表中预设图标的 fill 值：
.icon {
fill: currentColor;
width: 16px;
height: 16px;
}
.text-red {
color: red;
}
这样，无论文字颜色如何变化，图标都会同步。
适用场景与优势
这种做法特别适合：
- 主题切换系统（深色/浅色模式）
- 按钮不同状态（默认、悬停、禁用）
- 减少 CSS 变量或重复代码
只需改 color，图标自动适配，样式更简洁，维护更方便。
基本上就这些。用 currentColor 能轻松实现图标与文字颜色一致，是现代前端开发中的实用技巧。不复杂但容易忽略。
