data-uri() 是最安全的内联方式，但路径必须相对于 Less 主入口文件；应使用绝对路径、纯文本 SVG、不加 MIME 参数、引号包裹；手动拼接需严格转义特殊字符。
data-uri() 函数能直接用，但路径必须对得上编译入口
Less 原生 data-uri() 是最安全的内联方式——它在编译期读文件、转 base64、拼 URI，不依赖运行时，也不触发 CSP 限制。但它只认「相对于 Less 主入口文件」的路径，不是当前 .less 文件。
常见错误：icons/arrow.svg 写在 components/button.less 里，但入口是 main.less（位于上两级），结果报错 File not found: icons/arrow.svg。
- 统一用绝对路径写法：
data-uri('src/assets/icons/heart.svg')（以项目根为基准） - 确保
.svg是纯文本：无 BOM、无 JS、无<script></script>、无外部<use></use>引用 - 不要加 MIME 参数：
data-uri('x.svg', 'image/svg+xml')在 Less 4.x+ 会直接编译失败 - 路径必须用引号包裹，单双引号都行，但不能不加
手动拼接 data:image/svg+xml;charset=utf-8 字符串要转义严格
当构建流程不可控（如 CI 环境、lessc 命令行直编）时，data-uri() 可能失效，就得手动拼字符串。这时所有特殊字符必须提前转义，否则 Less 编译器会把 、<code>>、" 当语法符号处理，直接报错。
- 用在线工具生成（搜 “SVG to Data URI encoder”），选
utf-8编码，别选 base64 - 复制出来的字符串里，
→ <code>%3C，>→%3E，"→%22，#→%23 - 整个字符串必须用单引号包裹：
'data:image/svg+xml;charset=utf-8,%3Csvg%3E%3Cpath d="M12" fill="%23007bff"/%3E%3C/svg%3E' - 变量名禁用连字符：
@icon_heart✅，@icon-heart❌（Less 解析成减法）
想让 fill 响应 currentColor？SVG 源码里不能硬写 fill 属性
内联 SVG 作为 background-image 时，fill 不继承父元素颜色，因为浏览器把它当位图处理了。唯一能响应 currentColor 的方式，是 SVG 源码里根本没写 fill，全靠 CSS 控制。
立即学习“前端免费学习笔记（深入）”；
- 删掉 SVG 中所有
fill="..."、stroke="..."属性 - 把
<path></path>改成<path fill="currentColor"></path>（注意是字符串里的字面量） - 这样编译后生成的 background-image 才能随父级
color或border-color变色 - 如果用了
data-uri()，这个规则也成立——它只是编码，不改内容逻辑
background-image 里不能插变量，url() 不支持动态值
别写 @icon: 'data:image/svg+xml,...'; background-image: url(@icon);——Less 会报错 Invalid URL。因为 url() 只接受字面量字符串，不接受变量引用。
- 正确做法是用 Mixin 封装：
.icon(@path) { background-image: url(@path); }，调用时传静态字符串：.btn { .icon('data:image/svg+xml;charset=utf-8,...'); } - 不要试图用
replace()或escape()动态拼接 URI——标准 Less 不支持，需额外插件，且兼容性差 - 更稳的方案是交给构建工具（如 webpack 的
svg-url-loader），Less 层只写干净路径：url('./icons/check.svg')
width/height 不再响应式缩放，viewBox 失效，高 DPI 下还会模糊。如果图标需要灵活缩放或主题换色，优先走构建工具自动内联，而不是手搓字符串。 
