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 中，不是通过 <img> 引入），可直接对 <svg> 或其子元素（如 <path>、<use>）设置 fill: currentColor：
<p style="color: #007bff;">
<svg width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7h-2v2H7V7H5v2H3V7a1 1 0 0 1 1-1h2v2h2V7z"/>
</svg>
点击编辑
</p>
此时 SVG 图标会和“点击编辑”文字一样是蓝色；若把 style="color: red"，图标立刻变红。
立即学习“前端免费学习笔记（深入）”；
字体图标（如 Font Awesome）也适用
如果使用 <i class="fas fa-edit"></i> 这类字体图标，本质是文字，只需确保其 color 被正确设置，图标自然随文字变色。不需要额外设置 fill —— 因为字体图标渲染靠的是 color 属性本身。
- 避免写死
color: #333在图标上，让它继承父级 color - 需要统一控制时，可在父容器设
color，所有子图标自动响应 - 配合伪元素（如
::before）插入字体图标时，同样用color: inherit或直接依赖继承链
兼容性与注意事项
currentColor 支持所有现代浏览器（Chrome 19+、Firefox 19+、Safari 6+、Edge 全支持），IE9+ 也支持，基本可放心使用。
- 仅对内联 SVG 生效；
<img src="icon.svg">不会继承，因为 SVG 是独立文档上下文 - 若 SVG 中已有
fill写死（如fill="#000"），会覆盖currentColor，需移除或改为fill="currentColor" - 用
currentColor设置边框、阴影、背景时同样有效，比如border: 1px solid currentColor
