SCSS不解析SVG，仅字符串拼接；推荐UTF-8 data URI（单引号包裹、手动URL编码、删XML声明、显式宽高、避免变量存储、用currentColor实现颜色动态化）。
SCSS本身不解析SVG，只做字符串拼接
SCSS不是构建工具，@import或$icon: "data:image/svg+xml;..."这类写法只是文本替换。编译后浏览器看到的仍是原始字符串——只要中间有换行、缺charset=utf-8、或引号嵌套错位，就会静默失败（尤其 Safari 和旧 Chrome）。
直接用 UTF-8 data URI 比 base64 更稳
base64 容易因编辑器自动折行或 SCSS 插值（如#{$icon}）多套一层引号而崩掉；而 UTF-8 方式把 SVG 源码 URL 编码后直塞进url()，更可控。关键点：
- 必须用单引号包裹整个
url('data:image/svg+xml;utf8,...')，避免双引号内出现未转义的"或\n - 原始 SVG 中的
、<code>>、"、#等要手动转义为%3C、%3E、%22、%23（推荐用 Pythonurllib.parse.quote或在线 URL Encoder 工具） - 删掉 SVG 开头的
<?xml ... ?>声明，保留xmlns="http://www.w3.org/2000/svg"即可 -
viewBox在 data URI 中无效，必须显式写width和height（或靠background-size控制）
别用 SCSS 变量存 SVG 字符串
这是最常踩的坑：$icon-close: "data:image/svg+xml;utf8,%3Csvg..."; → background-image: url(#{$icon-close}); 会生成url("data:image/svg+xml;utf8,%3Csvg...")，外层双引号导致解析失败。正确做法是绕过变量，让字符串“躺平”：
.icon-close {
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"20"%20height%3D"20"%3E%3Cpath%20fill%3D"%23333"%20d%3D"M10%202h8v8h-8z"%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-size: 100%;
}
颜色动态化只能靠 currentColor，别指望 fill 属性继承
data URI 是静态资源，里面写死的fill="#333"无法被 CSS 覆盖。若需随文字色变化，必须把fill改成fill="currentColor"，再配合父元素设置color。否则就得切回<svg><use></use></svg>方案。
立即学习“前端免费学习笔记（深入）”；
真正难处理的是那些依赖外部定义（比如<defs><linearGradient>）的 SVG——data URI 不支持跨引用，所有定义必须内联、扁平、无嵌套。稍复杂一点的图标，就该考虑放弃内联，改用 symbol sprite。
