直接用url(data:image/svg+xml;base64,...)硬编码进Less变量不可行，因Less不支持运行时编码且维护成本高；推荐由构建工具（如Webpack/Vite）自动将svg路径转为Base64内联。
直接用 url(data:image/svg+xml;base64,...) 写进 Less 变量或混合（mixin）里，是可行的，但必须手动编码、无法动态生成、维护成本高；真正实用的方式是让构建工具（如 Webpack/Vite）在编译时注入 Base64 字符串，Less 本身不处理编码逻辑。
Base64 图标不能直接写在 Less 里做变量
Less 不支持运行时读取文件或调用 btoa()，所有 Base64 字符串必须是静态字符串。如果你把一长串 SVG 的 Base64 值硬编码进 @icon-home: "PHN2Zy4uLjwvc3ZnPg==";，后续改图标就得手动重编码、易出错、Git diff 失去可读性。
- SVG 文件变更后，必须重新执行
base64 -i home.svg或用 Node 脚本生成，再粘贴进 Less - 不同环境（Windows/macOS）的 base64 命令默认换行行为不一致，容易引入不可见的
\n导致 CSS 解析失败 - Less 编译器（lessc）不校验 Base64 格式，错误字符串只会在浏览器控制台报
GET data:image/... net::ERR_INVALID_URL
推荐方案：用 Webpack 的 css-loader + url-loader 自动转 Base64
这不是 Less 的功能，而是构建层该干的事——让 CSS（包括 Less 编译结果）里的 url("./icons/home.svg") 在打包时自动内联为 Base64。Less 只需写语义化路径，不碰编码。
- 配置
url-loader的limit（如8192），小于该字节数的 SVG 就转 Base64，否则输出独立文件 - Less 中直接写：
.icon-home { background-image: url("./icons/home.svg"); }，无需任何 Base64 手动操作 - 确保
svg在url-loader的test规则中，例如/\.(png|jpe?g|gif|svg)$/i - Vite 用户改用
assetsInlineLimit配置项，效果等价，且默认已支持 SVG
如果非要在 Less 里“模拟”图标库，用 SVG Data URL 混合（mixin）
仅适用于极少量固定图标（比如 3–5 个），且 SVG 极简（无注释、无换行、属性单行）。目的是避免重复写 background 样式，不是真做编码库。
立即学习“前端免费学习笔记（深入）”；
- 先用脚本把 SVG 转成紧凑 Data URL：
data:image/svg+xml,%3Csvg...%3E（注意 URL 编码，不是 Base64） - Less 中定义 mixin：
.icon(@svg-url) { background-image: url(@svg-url); background-repeat: no-repeat; } - 调用：
.btn { .icon("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'%3E%3Cpath d='M12...'%3E%3C/svg%3E"); } - 不要用 Base64 在 mixin 里拼接——
url("data:image/svg+xml;base64,#{@svg-base64}")在 Less 里无法安全插值，会因空格/换行破坏字符串
真正麻烦的从来不是怎么写进 Less，而是谁来保证每个 SVG 文件的 viewBox 一致、fill 透明、尺寸归一；Base64 只是表象，图标库的可用性取决于 SVG 源文件的标准化程度。
