currentColor 可解决 CSS 图标与文字颜色不一致问题。1. currentColor 是 CSS 关键字，表示当前元素的 color 值；2. SVG 图标设置 fill="currentColor"，字体图标默认继承 text color；3. 推荐封装 .icon 类统一样式，便于维护；4. 背景图标需改用 mask 或 inline SVG。使用后图标颜色自动同步文字，适合主题切换场景。
在使用CSS图标时，经常遇到图标和文字颜色不一致的问题。比如你设置了文字颜色为红色，但图标颜色却是默认的黑色或蓝色，看起来很不协调。这个问题可以通过 currentColor 来统一处理，让图标自动继承文本颜色。
什么是 currentColor？
currentColor 是 CSS 中的一个特殊关键字，它表示当前元素的 color 属性值。换句话说，如果你把 color 设置为 red，那么 currentColor 就等于 red。
这个特性非常适合用来控制图标的颜色，尤其是使用 SVG 图标或 icon font 时，可以让图标颜色始终与文字保持一致。
如何用 currentColor 统一颜色？
假设你的文字和图标放在同一个容器中：
立即学习“前端免费学习笔记（深入）”；
这里的关键是：fill="currentColor"（对 SVG）或 color: currentColor（对字体图标），这样图标的填充色就会自动跟随父元素的 text color。
- SVG 图标：设置 fill 或 stroke 为 currentColor
- 字体图标（如 Font Awesome）：确保图标本身 color 继承自父级，一般默认就支持
- 背景图标（background-image）无法使用 currentColor，需改用 mask 或 inline SVG 方案
实际应用建议
为了更方便维护，可以把常用样式封装成类：
.icon {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: -0.125em;
}
这样所有 SVG 图标加上 .icon 类后，颜色都会自动匹配文字，无需额外设置颜色。
基本上就这些。用 currentColor 能大幅简化颜色管理，避免手动同步图标和文字颜色，特别适合主题切换或多色场景。不复杂但容易忽略。
