currentColor 是 CSS 关键字，代表当前元素的 color 计算值，可自动继承文本颜色并用于 fill、border-color 等属性，适用于内联 SVG 和字体图标，现代浏览器及 IE9+ 均支持。
直接使用 currentColor 就能让图标颜色自动跟随文字颜色变化，无需额外写 JS 或重复定义颜色值。
什么是 currentColor？
currentColor 是一个 CSS 关键字，代表当前元素的 color 计算值。它像一个“颜色变量”，会自动继承父级或自身设置的文本颜色，并可用于任何接受颜色值的属性（如 fill、border-color、background-color 等）。
SVG 图标中用 fill: currentColor
当 SVG 以内联方式嵌入 HTML（即写在 HTML 中，不是通过 或其子元素（如 ）设置 fill: currentColor：
点击编辑
此时 SVG 图标会和“点击编辑”文字一样是蓝色；若把 style="color: red"，图标立刻变红。
立即学习“前端免费学习笔记（深入）”；
字体图标（如 Font Awesome）也适用
如果使用 这类字体图标，本质是文字，只需确保其 color 被正确设置，图标自然随文字变色。不需要额外设置 fill —— 因为字体图标渲染靠的是 color 属性本身。
- 避免写死
color: #333在图标上，让它继承父级 color - 需要统一控制时，可在父容器设
color，所有子图标自动响应 - 配合伪元素（如
::before）插入字体图标时，同样用color: inherit或直接依赖继承链
兼容性与注意事项
currentColor 支持所有现代浏览器（Chrome 19+、Firefox 19+、Safari 6+、Edge 全支持），IE9+ 也支持，基本可放心使用。
- 仅对内联 SVG 生效；
- 若 SVG 中已有
fill写死（如fill="#000"），会覆盖currentColor，需移除或改为fill="currentColor" - 用
currentColor设置边框、阴影、背景时同样有效，比如border: 1px solid currentColor
