fill="var(--color)"在svg源码中无效，因浏览器不解析html属性内的css变量；必须删除所有内联fill属性，改用css规则如.icon path { fill: var(--color, currentcolor); }绑定，并确保变量定义在svg容器上。
必须内联 SVG，且不能保留原始 fill 属性，否则 var(--color) 会被覆盖失效。
为什么 fill="var(--color)" 在 SVG 源码里完全不生效
SVG 内联属性（如 fill="var(--color)"）是无效语法，浏览器直接忽略；CSS 自定义属性只能通过 CSS 规则绑定到 SVG 元素上，不能写进 HTML 属性值里。
- 错误写法：
<path fill="var(--icon-fill)"></path>→ 解析为黑色或透明，变量不计算 - 正确路径：删掉所有
fill属性，用 CSS 选择器写.icon path { fill: var(--icon-fill); } - 若 SVG 来自设计工具（Figma / Illustrator），导出时默认带
fill="#000"，必须手动清空或替换为fill="none"
var(--color, currentColor) 是最安全的 fallback 写法
变量未定义时图标消失，是线上最常见的“图标突然变空白”原因；加 currentColor 降级能兜底文字色，兼顾可访问性与暗色模式。
-
.icon svg path { fill: var(--icon-fill, currentColor); }—— 变量缺失时自动取父元素color - 父容器必须有明确
color值，哪怕只是color: inherit;，否则currentColor会退到浏览器默认黑 - 不要写成
fill: var(--icon-fill, #000)，硬编码色值无法响应主题切换
变量必须定义在祖先元素上，:root 不一定管用
CSS 变量作用域是“声明处向上查找”，:root 定义的变量不会自动穿透到子组件 scoped 样式或 Shadow DOM 中，更不会影响 <use></use> 引用的 <symbol></symbol> 内部。
- 推荐方式：在 SVG 容器上直接设
style="--icon-fill: #2563eb;"，作用域精准、无穿透风险 - Vue / React 组件中，
<style scoped></style>会阻止父组件变量流入，需用:deep(.icon) { color: var(--icon-color); }或改用 CSS-in-JS 注入 -
<use href="#check"></use>要生效，<symbol id="check"></symbol>必须在当前 DOM 中（不能藏在<template></template>或外部文件里），且其内部路径也不能带fill
真正容易被忽略的是：SVG 不是图片，它是 DOM 树。你得打开开发者工具，一层层点开 <svg></svg> → <path></path>，确认 computed style 里 fill 确实来自你写的那条 CSS 规则，而不是被内联属性、更高优先级选择器或 Shadow DOM 截断了。任何想跳过这步、靠“套个 class 就变色”的做法，都会在换主题或加新组件时崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
