currentColor 是一个CSS颜色关键词，其值等于当前元素的color计算值，使SVG图标通过fill或stroke设为currentColor自动继承父级文字色及伪类状态变化。
currentColor 是什么，为什么它能联动图标颜色
它不是变量，也不是 CSS 自定义属性，而是一个“颜色关键词”，值等于当前元素的 color 计算值。只要图标的描边或填充用的是 currentColor，它就会自动继承父级文字色——包括伪类状态（:hover、:focus、:disabled）触发的颜色变化。
关键点在于：它只响应 color 的变更，不响应 background-color 或其他属性；且必须是 SVG 内联写法或使用 <use></use> 引用时保留样式控制权，否则外部 CSS 无法穿透覆盖 fill/stroke。
SVG 图标里怎么写才能让 currentColor 生效
直接在 SVG 标签内把 fill 或 stroke 设为 currentColor，而不是硬编码颜色值。如果图标来自雪碧图或字体图标（如 IconFont），这条路走不通——它们不支持 CSS 动态接管颜色。
常见错误现象：fill="#333" 写死、用 fill="inherit"（不等价于 currentColor）、SVG 被包裹在 <img> 标签里（无法注入 CSS）。
实操建议：
- 用内联 SVG：把 SVG 代码直接贴进 HTML，确保
<path fill="currentColor"></path>或<svg style="fill: currentColor"></svg> - 避免
<img src="icon.svg">—— 这种方式完全隔离样式 - 若用
<use></use>，需确保原始<symbol></symbol>中未声明fill，且宿主元素有可继承的color
:hover 和 :disabled 状态下颜色不更新？检查这三处
不是 currentColor 失效，而是状态样式没生效或被覆盖。最常踩的坑是选择器权重不足，或者父容器没设 color。
使用场景：按钮带图标、表单输入框前缀图标、导航菜单项。
实操建议：
- 给容器（比如
<button></button>或<label></label>）设置color，而不是只给图标设 - 状态规则要写全：比如
button:hover { color: #007bff; }，不能只写button:hover svg { color: … } - 检查是否用了
!important锁死旧颜色，或 inline style 覆盖了 CSS 规则
和 CSS 变量混用会怎样？别绕弯子
可以共存，但没必要。有人想用 --icon-color: var(--primary); 再让 SVG 填充它，结果发现 SVG 里写 fill: var(--icon-color) 并不能响应父级 color 变化——这就丢掉了 currentColor 最核心的价值：自动联动。
性能影响几乎为零，兼容性极好（IE9+ 支持），但注意 Safari 早期版本对 currentColor 在 filter 或 mask 中的支持有限。
真正复杂的地方在于：当图标嵌套多层（比如 SVG 里再 <use></use> 一个 symbol），某些浏览器会丢失继承链；这时宁可退一步，在最外层容器上统一控制 color，并确保所有 SVG 路径都显式写 fill="currentColor"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
