currentcolor 是唯一自动继承父元素 color 的 css 颜色关键字，需内联 svg 显式设 fill="currentcolor"、字体图标清除硬编码 color、伪元素先设 color 再间接应用，且须避免 !important 和 fill="none" 等覆盖。
currentColor 是 CSS 中唯一能自动继承父元素 color 值的“颜色关键字”，它不是固定值，而是一个实时绑定的变量。只要父文字颜色变化，用 currentColor 填充的图标就会同步变色——前提是图标的渲染方式支持 CSS 颜色控制。
SVG 内联图标必须用 fill="currentColor"
外部 SVG 文件或 <img> 引入的图标无法响应 currentColor，只有内联 SVG（即直接写在 HTML 中的 <svg></svg>）才能通过属性绑定继承。关键点是：必须显式把 fill 属性设为 "currentColor"，不能依赖 CSS 的 fill: currentColor（部分浏览器对 SVG 元素的 CSS fill 继承支持不稳定）。
- ✅ 正确：
<svg><path fill="currentColor" d="..."></path></svg> - ❌ 无效：
<svg style="fill: currentColor"><path d="..."></path></svg>（Safari 15.4 之前不生效） - ⚠️ 注意：
stroke同样可用"currentColor"，但需对应设置，fill和stroke不会互相覆盖
CSS 字体图标（如 iconfont）要禁用默认 color 并用 color 控制
字体图标本质是文字，天然继承 color，但很多图标字体库的初始化 CSS 会强行重置 color（比如设成 #333），这就切断了继承链。必须覆盖掉这些硬编码颜色。
- 检查开发者工具中图标元素的最终
color是否被其他规则覆盖 - 确保图标元素没有
color行内样式或高优先级类名干扰 - 可加一层 wrapper 并统一设
color: var(--icon-color, inherit)，再让图标继承它 - 避免用
fill或background模拟字体图标——那已脱离文字流，无法响应currentColor
伪元素图标需用 color 触发继承，再转给 fill 或 background
用 ::before/::after 插入图标时，伪元素本身没有文本内容，currentColor 默认继承自父元素的 color，但仅当它被用于支持颜色的属性（如 color、border-color）才可靠。若想用 SVG data URL 或 mask，得靠间接方式。
- ✅ 可靠做法：伪元素设
color: currentColor，再用mask-image: url("data:image/svg..."); mask-border: solid等组合（现代浏览器） - ✅ 兼容做法：用
background+ SVG data URL，并将fill写死为currentColor（注意 URL 编码，%23000要换成currentColor） - ❌ 错误假设：以为
content: "";+font-family: iconfont就自动继承——仍需确保该伪元素的color未被重置
真正容易被忽略的是层级污染：一个 color 被 !important 锁死的祖先元素，会让所有后代的 currentColor 失效；还有 SVG 中 fill="none" 或 fill="transparent" 会覆盖 currentColor，哪怕 CSS 里写了 fill: currentColor 也无济于事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
