svg内联fill="var(--color)"无效，因浏览器不解析html属性中的css变量；须移至css规则，用currentcolor fallback并确保父容器有color值，配合viewbox和em单位实现响应式缩放。
为什么直接写 fill="var(--color)" 在 SVG 里完全没反应
浏览器根本不解析 HTML 属性值里的 CSS 变量，fill="var(--color)" 被当作文本字面量忽略，最终渲染为默认色（通常是黑色或透明）。你看到图标没变色，不是变量没定义，而是它压根没被读取。
必须把颜色控制逻辑从内联属性移到 CSS 规则里：
- 删掉所有
<path></path>、<circle></circle>上的fill和stroke属性（包括fill="#000"） - 确保 SVG 是内联写法（
<svg><path></path></svg>），不是<img src="icon.svg"> - 用选择器绑定变量，例如：
.icon path { fill: var(--icon-color, currentColor); } - 变量必须定义在祖先元素上，
:root定义的变量在 Shadow DOM 或 Vue/React scoped 样式里不自动生效
currentColor 是最稳的 fallback，但父容器 color 必须有值
写 fill: var(--icon-color, currentColor) 看似保险，但如果父容器没设 color（哪怕只是 color: inherit;），currentColor 就退到浏览器默认黑——图标“突然消失”或“变黑”基本都是这个原因。
实操建议：
- 给图标容器加一层明确的
color，比如<span class="icon" style="color: #3b82f6"></span> - hover 状态直接改容器
color：.icon:hover { color: #ef4444; }，无需重写 fill 规则 - 暗色模式兼容靠
currentColor自动响应系统色，比硬编码色值更可靠 - 如果图标含描边，别漏掉
stroke: var(--icon-color, currentColor)
缩放要用 em + font-size，不是 px 或 transform
width: 24px 写死尺寸，断点里得重复写多套 media query；transform: scale(1.5) 表面放大了，但盒模型尺寸、点击区域、margin 还是按原始大小算，容易错位。
真正响应式的做法：
- SVG 标签只保留
viewBox，删掉width和height属性 - CSS 设
.icon svg { width: 1em; height: 1em; } - 父容器设
font-size：按钮文字缩小时，图标自动等比缩小；用户调大系统字体，图标也跟着变大 - 需要精细控制时，用
clamp()：font-size: clamp(12px, 1.5vw, 16px);
变量名要带作用域，避免跨组件污染
--icon-color 这种全局变量，在复杂项目里极易被其他组件覆盖。比如一个弹窗组件也用了同名变量，图标颜色就随机切换。
安全做法：
- 在组件级容器上定义变量：
<div class="header" style="--icon-color: #1e40af"></div> - Vue/React 中用
:deep(.icon) { --icon-color: v-bind(iconColor); }注入 - 搭配
!important是陷阱：它会让 hover、disabled 等状态难以覆盖，后期维护成本飙升 - 调试时打开开发者工具，逐层点开
<svg> → <path></path></svg>，确认 computed style 的fill确实来自你写的那条 CSS 规则，而不是被内联属性或更高优先级选择器截断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
