SVG内联图标不能用url()引用文件，因其被当图片处理而无法动态修改fill/stroke等属性；必须用data URI内联SVG代码并转义，再通过Sass变量和mixin实现主题色替换与复用。
SVG内联图标为什么不能直接用url()引用文件
因为url()加载的SVG是外部资源，无法被CSS动态修改内部fill、stroke等属性——浏览器把它当图片处理，不是DOM节点。你改color没用，伪元素也进不去。
真正能动态控制图标的，只有把SVG代码直接塞进HTML或CSS里（即内联）。Sass能帮你在编译期拼接、注入、复用这些内联内容。
- 常见错误现象：
.icon { background: url("icon.svg"); }→ 改color无效，主题切换时图标颜色卡死 - 正确路径：用Sass变量存SVG字符串，再通过
background-image: url("data:image/svg+xml,...")注入 - 注意URL编码：SVG里的
、>、"必须用%3C、%3E、%22转义，否则解析失败 - Sass 3.4+支持
str-replace和url-encode函数，但原生不带；推荐用svg-url()mixin（如@use "sass:meta"配合手动转义）或构建时用PostCSS插件补位
如何用Sass变量统一管理SVG图标并支持主题色替换
核心思路是：把SVG源码写成Sass字符串变量，用str-replace把占位符（如{color}）替换成实际值，再套上url() data URI封装。
这样一套变量就能生成多套主题图标，不用维护多个SVG文件。
- 定义变量示例：
$icon-home: ''; - 封装mixin：
@mixin icon($name, $color: currentColor) { background-image: url("data:image/svg+xml,#{str-replace($name, '{color}', $color)}"); } - 调用：
.home { @include icon($icon-home, "#3b82f6"); }→ 自动生成带蓝色fill的内联SVG背景 - 坑点：Sass编译器对长字符串转义不一致，Node Sass旧版本可能截断；Dart Sass更稳，建议锁定
sass@~1.70.0以上
为什么background-image + data URI比
因为CSS图标可复用在伪元素、按钮背景、loading状态等任意场景，而HTML 需要额外DOM结构，还容易破坏语义或触发重排。
- 使用场景差异：
::before加装饰图标、禁用态自动灰化（靠filter: grayscale(1)）、按钮hover时换色——全靠CSS驱动，无需JS干预 - 性能影响：data URI在编译时生成，无HTTP请求；但体积略大（base64或URI编码后膨胀约30%），适合中低频图标（≤50个）
- 兼容性：Chrome 19+、Firefox 20+、Safari 5.1+均支持；IE11仅支持base64版，需额外判断并fallback
- 别硬套
content: url(...)：它不支持伪元素的currentColor继承，且部分浏览器渲染延迟明显
Sass编译后CSS体积暴增？三个压缩关键点
大量内联SVG确实会让CSS文件变胖，但多数问题出在未做基础优化。
- 删空白与注释：用
postcss-svgo在输出前压缩SVG字符串本身（移除title、desc、冗余fill="black"等） - 避免重复编码：不要对同一SVG多次调用
url-encode；先encode再存变量，而不是每次mixin里encode - 按需导入：用
@use "icons/home" as home代替全局@import "icons/all"，Webpack/Vite的tree-shaking才能生效 - 真实踩坑：某项目把20个图标全写在一个SCSS里，未分割模块，导致按钮组件打包时带入了整套图标CSS，体积多出12KB
Sass处理SVG图标真正的复杂点不在语法，而在“何时该让SVG留在HTML里”——比如需要动画、焦点管理、屏幕阅读器支持的图标，仍是唯一选择；CSS内联只适合纯装饰、无交互、无语义要求的场景。这个边界不划清，后期维护成本会指数上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
