相对颜色语法不能直接为图标着色，仅用于生成动态css颜色值；图标动态变色必须依赖父元素color + svg的currentcolor继承机制。
不能直接用相对颜色语法给图标自动着色——它不作用于 SVG fill 或字体图标，只用于生成新的 CSS 颜色值（如 color、background）。想让图标“动态着色”，得靠 currentColor；相对颜色的真正用途是：基于主题色派生 hover 态、禁用态、文字强调色等。
为什么 rgb(from var(--icon-color) r g b) 对图标无效
相对颜色语法本身不触发样式继承，也不修改 SVG 属性。它只是在 CSS 层生成一个新颜色值，必须显式赋给某个支持颜色的属性（比如 color 或 background），而 SVG 的 fill 不会自动读取这个值——除非你把它赋给父元素的 color，再让 SVG 通过 currentColor 继承。
- 写了
svg { fill: rgb(from var(--primary) r g b); }→ 实际等价于fill: rgb(255, 0, 0)，没动态性，也没继承链 -
fill不接受from语法，浏览器会直接报错或忽略整条声明 - 想让图标响应式变色，核心路径永远是：父容器设
color→ SVG 用fill="currentColor"
from + calc() 真正该用在哪
相对颜色的价值在于从一个变量色出发，批量生成语义化衍生色，比如按钮 hover、禁用文本、高亮标签。这些颜色最终要赋给 color、background 或 border-color，再由 currentColor 向下透传到图标。
- 按钮 hover 变暗：
button:hover { color: hsl(from var(--primary) h s calc(l - 15)); } - 禁用态降透明度：
.icon--disabled { color: rgb(from var(--primary) r g b / 0.4); } - 文字强调色（比主色更饱和）：
.highlight { color: hsl(from var(--primary) h calc(s + 10) l); } - 注意：
calc()里不能写%单位，hsl()的s和l是 0–100 的纯数字，rgb()的r/g/b是 0–255 整数
内联 SVG + currentColor 才是图标动态着色的唯一可靠组合
所有“自动跟着文字变色”的图标方案，都依赖这个组合。相对颜色只是帮你更灵活地定义那个“文字色”。
- 必须删掉 SVG 路径里的内联
fill，例如把<path fill="#333"></path>改成<path></path> - 父容器必须有明确的
color声明，哪怕只是color: var(--text-primary);或color: inherit; - 如果用了
<use href="#icon"></use>，确保<symbol></symbol>内部路径也没写死fill - 在 Vue/React 等框架中，
scoped样式会截断color继承，需用:deep(.icon) { color: var(--icon-color); }显式穿透
真正容易被忽略的是：相对颜色不是“图标着色工具”，而是“主题色运算器”。它的输出必须落到 color 上，再经由 currentColor 这一层桥梁，才能抵达 SVG。跳过这层，就等于把新生成的颜色扔进真空里——谁都看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
