currentcolor仅继承父元素文本色，无法独立控制图标多主题/动态配色；需用--icon-fill等css自定义属性解耦颜色逻辑，配合:root变量、媒体查询及var(--icon-fill, currentcolor)降级实现灵活适配。
为什么直接用 currentColor 不够用
当项目需要多主题（比如亮色/深色/高对比度）或动态配色（如用户自定义主色），只靠 currentColor 就会卡住：它只能继承父元素的 color，而 color 本身通常只控制文字，不能单独为图标指定“图标主色”“描边强调色”“禁用态灰度”等语义化颜色。更麻烦的是，color 还可能被文本样式污染——比如按钮里放图标，按钮文字用了 color: #fff，但图标本该是蓝色，这就冲突了。
--icon-fill 替代 currentColor 的写法
把颜色逻辑从 color 解耦出来，用 CSS 自定义属性显式声明图标配色：
<svg class="icon" viewbox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>
CSS 中统一接管：
.icon {
--icon-fill: currentColor;
}
.icon path {
fill: var(--icon-fill);
}
这样后续只需改 --icon-fill 值，就能独立控制图标颜色，不干扰文字、不依赖父级 color：
.icon.success { --icon-fill: #28a745; }.icon.disabled { --icon-fill: #6c757d; }.theme-dark .icon { --icon-fill: #adb5bd; }
配合 @media (prefers-color-scheme) 自动切换
深色模式适配不能只靠 JS 切 class，CSS 原生支持更轻量：
:root {
--icon-fill-default: #495057;
}
@media (prefers-color-scheme: dark) {
:root {
--icon-fill-default: #ced4da;
}
}
.icon {
--icon-fill: var(--icon-fill-default);
fill: var(--icon-fill);
}
注意两点：
- 必须在
:root级别定义变量，否则媒体查询内无法覆盖 -
fill: var(--icon-fill)要写在能命中<path></path>的选择器里，不能只写在.icon上（<svg></svg>元素本身不渲染颜色，真正填色的是子元素）
若依等框架中如何安全注入变量
若依的 <svg-icon></svg-icon> 组件默认把 SVG 当字符串插入，不会解析自定义属性。要让它支持 --icon-fill，得在组件内部加一层包裹并透传：
<template><span class="svg-icon-wrap" :style="{ '--icon-fill': color }">
<svg-icon :icon-class="name"></svg-icon></span>
</template>
再补上样式：
.svg-icon-wrap svg path {
fill: var(--icon-fill, currentColor);
}
关键点：
- 变量必须由父容器通过
:style注入，不能指望组件内部读取全局:root -
var(--icon-fill, currentColor)提供降级，避免变量未定义时图标变黑 - 若图标含
stroke，同样要加stroke: var(--icon-stroke, currentColor);
最常被忽略的是：SVG 源文件里仍残留 fill="#333" —— 它会直接覆盖 var()，必须提前清理干净，否则所有 CSS 变量都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
