var(--icon) 不能直接用于 background-image，因 css 变量仅存储字符串字面量，导致 url("url(data:...)") 双层嵌套而失效；正确做法是变量存 base64 数据或 url 编码 svg 字符串，在 url() 外拼接，或交由构建工具自动内联。
为什么 var(--icon) 不能直接用于 background-image
CSS 自定义属性（--icon: url(data:image/svg+xml;base64,...)）只存储原始字符串，不解析 url() 语法。当你写 background-image: var(--icon)，浏览器会把整个字符串当作文本字面量塞进去，结果变成 url("url(data:...)") —— 双层 url() 套叠，图片必然空白，控制台也无报错。
正确写法：变量存路径，属性中拼 url(var(--x))
必须把 Base64 字符串本身存进变量，然后在使用处显式包裹 url()：
--icon-data: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjEwIiBjeT0iMTAiIHI9IjUiIGZpbGw9ImJsdWUiLz48L3N2Zz4=;-
background-image: url("data:image/svg+xml;base64, var(--icon-data)");❌ 错误：引号内不能插变量 -
background-image: url("data:image/svg+xml;base64," var(--icon-data));✅ 正确：引号外拼接，注意逗号后空格
但注意：这种写法仅在部分现代浏览器（Chrome 110+、Firefox 115+）支持；Safari 目前不认，会静默失败。
更稳妥的替代方案：用 url("data:image/svg+xml;charset=utf-8,...") + encodeURIComponent
对 SVG 图标，放弃 Base64，改用 URL 编码原始字符串，体积小、兼容好、还能配合 CSS 变量动态着色：
- 原始 SVG：
<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5" fill="var(--icon-color, #007bff)"></circle></svg> - 编码后：
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%225%22%20fill%3D%22var%28--icon-color%2C%20%23007bff%29%22%2F%3E%3C%2Fsvg%3E - CSS 中：
background-image: url("data:image/svg+xml;charset=utf-8," var(--icon-svg));
这样写，fill 能响应 --icon-color 变化，且无需 Base64 膨胀，也不依赖 Safari 对函数式 url() 拼接的支持。
构建时自动内联比手写 Base64 更可靠
手动复制粘贴 Base64 极易出错：漏 data:、错 MIME 类型、换行符混入、BOM 字符残留……推荐交给构建工具处理：
- Vite：设
build.assetsInlineLimit: 4096，并只对.icon.svg或.spinner.png生效 - Webpack：
url-loader配limit: 4096，配合name: "[name].[hash:6].[ext]"避免污染 - 验证方式：构建后打开
dist/assets/*.css，全局搜data:image，确认只有目标小图存在，且无大图或字体被误打进来
真正容易被忽略的是：即使你写对了所有语法，只要 Base64 字符串里有一个不可见的 U+FEFF（BOM）或编辑器自动插入的软换行，图片就彻底失效——而 DevTools 里看不出来，控制台也沉默。所以别信“复制完就完事”，一定要校验生成结果是否为单行纯 ASCII。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
