SVG内联是CSS变量生效的前提，必须将SVG源码直接嵌入HTML形成结构；fill="var(--color)"在SVG属性中无效，需在CSS中通过.svg path { fill: var(--icon-color); }设置。
SVG内联是CSS变量生效的前提
用 
background-image: url(icon.svg) 引入的 SVG，var(--color) 完全无效——它被当位图加载，DOM 里没有 结构。
常见错误现象：.icon svg { fill: var(--icon-color); } 写了但没反应，八成是 SVG 没内联，或者用了 但
- ✅ 正确：复制 SVG 文件内容，粘贴为纯 HTML 片段
- ✅ 可选：
加载，但有跨域和样式隔离风险 - ❌ 避免：
background
fill="var(--color)" 在 SVG 标签里不工作
fill="var(--color)" 这种写法放在 HTML 的 或
正确路径是：清空所有内联 fill/stroke，然后在 CSS 中显式作用于子元素。
- 删掉 SVG 源码里所有
fill="#000"、stroke="red"、style="fill:..." - 保留
viewBox、d、width等结构属性 - CSS 中写：
.icon svg path { fill: var(--icon-color); }，不是svg { fill: ... }
:root 定义变量 + 组件级覆盖更可控
全局变量适合基础色，但按钮、禁用态、深色模式等场景需要局部覆盖。直接改 :root 会影响所有图标，而组件级类名能精准控制。
推荐分层写法：
:root {
--icon-color: #3b82f6;
}
.btn-icon {
--icon-color: #007bff;
}
.btn-icon:disabled {
--icon-color: #9ca3af;
}
.icon svg path {
fill: var(--icon-color, currentColor);
}
-
var(--icon-color, currentColor)提供 fallback，避免变量未定义时变黑 - 深色模式可加：
:root[data-theme="dark"] { --icon-color: #9ca3af; } - 多色图标需给不同
hover 和 disabled 状态别只改父元素 color
仅写 .icon:hover { color: red; } 不会让图标变色——currentColor 是继承关系，但 fill 不自动响应伪类变化；而 CSS 变量本身也不触发重计算。
必须显式写出状态下的变量值或颜色值：
- 用变量：
.icon:hover svg path { --icon-color: #dc3545; } - 用具体值：
.icon:disabled svg path { fill: #9ca3af; } - 禁用态慎用
opacity，它会让整个 SVG（含描边、文字）一起变淡，破坏可读性
最易被忽略的一点：父容器没设 color，currentColor 就取浏览器默认黑色；哪怕只是 color: inherit;，也比什么都不写强。变量方案虽灵活，但每处调用都得确认作用域是否可达——shadow DOM 或 scoped style 下可能失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
