直接用 svg-uri 会破坏图标系统可维护性，因其将 SVG 编译为不可变 data URI 字符串，导致 fill、尺寸等无法通过 CSS 变量动态控制，难以适配暗色模式或统一换肤。
为什么直接用 svg-uri 会破坏图标系统可维护性
因为 svg-uri 是 Sass 函数，它把 SVG 内容转成 data URI 字符串，一旦写死在样式里，就和颜色、尺寸、描边等变量完全脱钩。比如你写了 background: svg-uri('<svg>...</svg>')，后续想统一改所有图标的 fill 或适配暗色模式，根本没法通过 CSS 变量控制——它已经被编译成一长串不可变的 base64 或转义字符串了。
常见错误现象：
• 图标在深色模式下变成黑块（fill="#000" 写死）
• 所有图标尺寸只能靠 background-size 调整，无法响应式缩放
• 更换品牌色时，要手动打开每个 SVG 字符串去替换 hex 值
用 SCSS 变量 + svg-uri 的正确组合方式
核心思路：把 SVG 的动态部分（fill、stroke、width）抽出来，用 SCSS 变量控制；只让 svg-uri 封装「结构不变」的骨架部分。
- 定义图标基础变量，例如：
$icon-fill: currentColor、$icon-stroke: var(--icon-stroke, 2) - 用
@function封装 SVG 模板，把变量注入进去：@function icon-check($fill: $icon-fill) { @return svg-uri( '<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="24" height="24"><path fill="#{$fill}" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg>' ); } - 在样式中调用：
background: icon-check(var(--color-success));，这样 fill 值仍由 CSS 变量驱动
兼容性与性能的关键取舍点
SCSS 编译期生成的 data URI 体积大，且无法被浏览器缓存。如果你的图标超过 10 个，svg-uri 会导致 CSS 文件膨胀明显。
更稳妥的集成路径是：
- 小项目（≤5 个图标）：用上面的
@function + $icon-fill方案，简单直接 - 中大型项目：放弃
svg-uri，改用<svg></svg>内联 + CSS 变量控制属性，例如：.icon-check { --icon-fill: var(--color-success); }，再配合fill: var(--icon-fill) - 必须用背景图场景（如伪元素）：用
url()引入独立 SVG 文件，再通过mask+background-color控制颜色，绕过svg-uri的硬编码限制
容易被忽略的 CSS 变量继承陷阱
当你在 :root 定义了 --icon-size: 20px，又在某个组件里写 .card-icon { --icon-size: 24px; }，这个变量**不会自动应用到该组件内所有 svg 元素上**——除非你在 SVG 元素上显式设置 width: var(--icon-size)。
更隐蔽的问题是：SVG 内联后，currentColor 默认继承父级文字颜色，但如果你用了 fill: var(--icon-fill, currentColor)，而 --icon-fill 在父级未定义，就会退回到 currentColor，此时若父级文字色是灰色，图标就灰了，而不是你预期的 brand 色。
所以务必检查两层：一是变量是否在作用域内声明，二是 SVG 元素是否真正消费了该变量（别只靠 svg-uri 里的字符串替换蒙混过关）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
