SVG内联fill写死时Less变量无法穿透生效，因fill不继承color且Less不解析SVG内容；应通过data-uri+escape()将变量编译为真实值嵌入CSS背景，而非依赖currentColor或DOM内联。
SVG内联fill写死时，Less变量无法穿透生效
直接在SVG标签里写fill="#333"，哪怕外面套了.icon { color: @primary; }也没用——SVG的fill不继承color，更不会自动读取Less变量。这是最常卡住的地方。
解决思路不是“让变量透进去”，而是“把变量编译成真实值，塞进SVG里”。关键在预处理阶段完成替换，而不是运行时靠CSS继承。
- 不要在HTML中直接写
<svg fill="#333"></svg>，改用占位符，比如fill="@{fill-color}" - 用Less的
.icon()混合（mixin）封装常用图标，传入@fill-color参数生成对应样式规则 - 确保SVG是作为
background-image: url("data:image/svg+xml,...")内联，而非DOM节点——这样才可控编译
用data-uri + escape()把SVG转成CSS背景
Less本身不解析SVG内容，但能拼字符串。把SVG内容URL编码后嵌入background-image，再用变量插值，是最稳妥的方案。
示例：定义一个图标背景混合：
立即学习“前端免费学习笔记（深入）”；
.icon-check(@color: #007bff) {
background-image: data-uri('image/svg+xml;charset=UTF-8',
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="@{color}" d="M12.5 4a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h9.5z"/></svg>'
);
background-repeat: no-repeat;
}
注意：escape()不是必须的，但若SVG含双引号或特殊字符，建议手动URL编码（如用encodeURIComponent处理后再粘贴），否则编译会报错。
为什么不用currentColor？它和Less变量不是一回事
currentColor确实能让SVG跟随color变化，但它只响应运行时CSS计算值，和Less编译期变量无关。你写.icon { color: @primary; }，编译后就是color: #007bff，这时currentColor才生效——但前提是SVG里真写了fill="currentColor"。
- 适用场景：需要运行时动态换色（比如hover、主题切换）
- 不适用场景：想用Less统一管理所有图标默认色，且部分图标需固定为
@warning、@success等语义色 - 混用风险：如果同时用了
fill="@{color}"和currentColor，前者优先级更高，后者被覆盖
生产环境要注意SVG路径中的空格与换行
Less编译器对字符串里的换行敏感。如果SVG源码带缩进或回车，data-uri()可能截断或报错。
- 把SVG压成单行（删除所有换行和多余空格），再做URL编码
- 避免在SVG中使用
fill="url(#gradient)"这类引用，Less无法解析ID引用 - 如果图标多，建议用构建脚本（如PostCSS或Webpack loader）自动注入变量，而不是手写大量
data-uri
真正麻烦的从来不是怎么填色，而是当设计师扔来37个不同颜色状态的SVG，你还得确保每个@{hover-color}在data-uri字符串里都被正确替换，且没漏掉转义。
