用 Less Mixin 封装 SVG 图标需先将路径转义为合法 CSS 字符串并用单引号包裹，再通过编译期静态注入 background-image；Mixin 支持参数化控制尺寸、颜色，比 CSS 变量更兼容、更可控。
如何用 Less Mixin 封装 SVG 图标路径
直接把 svg 路径写进 CSS 里不现实，但用 Less Mixin 封装后，图标能像函数一样调用，路径复用、颜色可控、尺寸可变——前提是路径得先转成合法的 CSS 字符串（比如把 <、>、双引号全转义），否则编译就报错。
- 路径字符串必须用单引号包裹，且内部所有
"、、<code>>、&都要手动转义为\"、<、>、& - 推荐用在线工具（如 “SVG to Data URI”）一键生成转义后的
data:image/svg+xml;charset=utf8,...字符串，再截取svg...部分塞进 Mixin - 别在 Mixin 里拼接变量名当路径，Less 不支持运行时解析字符串为样式；路径必须是编译期静态值
为什么 Mixin 比 CSS 自定义属性更适合图标封装
因为图标本质是“样式模板”，不是“可变状态”。用 --icon-path 这类 CSS 变量，你没法在 background-image 里动态插值（CSS 不支持 url(var(--icon-path)) 这种写法），而 Less Mixin 在编译时就把完整 background-image: url('...') 写死了，无兼容性包袱，也不依赖 JS 注入。
- Mixin 输出的是真实 CSS 规则，IE9+ 全支持；CSS 变量方案在 IE 下完全不可用
- 如果图标要响应式缩放，Mixin 可直接绑定
@size参数生成width/height，变量方案还得额外写媒体查询 - 多个图标共用同一套尺寸/颜色逻辑？Mixin 支持默认参数和重载，比维护一堆
--icon-xxx清晰得多
常见错误：background-image 中的 SVG 路径无法显示
八成是路径没转义或编码不对。浏览器解析 background-image: url("...") 里的 SVG 字符串时，遇到未转义的 " 或 会直接截断，控制台可能只报 “Invalid property value”，并不提示具体哪行。
- 检查生成的 CSS 是否包含未闭合的引号，比如
url("data:image/svg+xml;... viewBox="0 0 24 24" ...")—— 中间那个"必须是\" - 确保整个路径字符串 UTF-8 编码，中文或 emoji 会直接崩，一律删掉或用 Unicode 替代（如
\4F60\597D） - 如果用了
%20代替空格，Less 编译后可能变成%2520（被重复编码），改用+或直接删空格更稳
一个可用的图标 Mixin 示例（Less）
.icon(@name, @path, @size: 1em, @color: currentColor) {
display: inline-block;
width: @size;
height: @size;
background-image: url('data:image/svg+xml;charset=utf8,@{path}');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
color: @color;
// 注意：@path 是已转义的字符串，不能含变量
}
// 调用方式：
.my-icon { .icon('close', 'M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm-2%2015l-5-5%201.41-1.41L10%2014.17l7.59-7.59L19%208l-9%209z'); }
关键点：路径字符串必须提前转义，@path 是纯文本参数，不是表达式；background-size: 100% 确保 SVG 填满容器，否则小图标边缘容易留白。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是路径来源——设计稿导出的 SVG 往往带多余 group、style、注释，直接粘贴必炸；务必用 SVGO 或在线清理工具压平后再转义。
