真正可持续的方案是分层处理：构建层做转换，Less 层只管语义化调用；Webpack 配 url-loader、Vite 改 assetsInlineLimit，Less 中仅写 url("./icons/home.svg")；兜底用 Mixin 封装压缩转义后的 data URI；字体图标需字符串声明 Unicode 并显式插值 @{icon-home}。
直接在 Less 里硬编码 Base64 或拼接 SVG 路径，短期能跑，长期必崩——维护成本高、Git diff 失效、跨平台编码不一致、编译无报错但浏览器报 net::ERR_INVALID_URL。真正可持续的方案是分层处理：构建层做转换，Less 层只管语义化调用。
用 url-loader / assetsInlineLimit 让 SVG 自动转 Base64
这不是 Less 的事，是构建工具该干的活。Less 文件里只写干净路径，其余交给打包器。
-
url("./icons/home.svg")写进 Less 就完事，别碰data:image/svg+xml;base64,字符串 - Webpack 用户配
url-loader（或asset/inline模式），设limit: 8192，小于 8KB 的 SVG 自动内联为 Base64 - Vite 用户直接改
build.assetsInlineLimit（单位是字节），默认已支持 SVG，无需额外插件 - 确保
test规则包含/\.svg$/i，否则 SVG 会被当成普通文件输出，路径 404
用 Mixin 封装 SVG Data URL（仅限极简图标）
当项目无法接入构建流程，或只有 3–5 个固定图标时，可用此法兜底。重点不是“能不能”，而是“怎么避免编译失败”。
- SVG 必须先压缩：删注释、换行、多余空格，再用在线工具（如 SVG to Data URI）生成
data:image/svg+xml;charset=utf-8,格式（不是 Base64） - 路径中所有
"、、<code>>、&必须手动转义为\"、<、>、&，且整个字符串用单引号包裹 - Mixin 定义形如：
.icon(@path, @size: 1em) { background-image: url(@path); width: @size; height: @size; } - 调用时传入静态字符串：
.btn-home { .icon('data:image/svg+xml;charset=utf-8,%3Csvg%3E%3Cpath d="M12" fill="%23333"/%3E%3C/svg%3E'); }
用变量 + @{} 插值管理字体图标 Unicode
Font Awesome 或自定义 icon font 方案下，Unicode 码位必须用字符串声明并显式插值，否则浏览器不识别。
立即学习“前端免费学习笔记（深入）”；
- 变量必须带引号：
@icon-home: "\e900";（✅），不能写成@icon-home: \e900;（❌） - 伪元素中必须用
@{icon-home}，不能直接写content: @icon-home;，否则输出的是带引号的字符串字面量 - 统一管理路径与字体名：
@icon-font-path: "../webfonts";、@icon-font-name: "my-icons";，然后在@font-face中组合使用 - 路径失效 90% 是因为
@icon-font-path相对于最终 CSS 输出位置错了，建议用显式相对路径如../../webfonts
最易被忽略的一点：无论选哪种方式，图标是否显示最终取决于浏览器能否加载对应资源——Base64 字符串格式错误、SVG 转义漏掉一个 "、字体文件 404 或 CORS 阻止加载，都会导致空白方块。调试时别只盯 Less 编译结果，要查 Network 面板和 Elements 面板里的实际 url() 值。
