Less仅在编译期生成静态CSS或data URI，无法运行时控制SVG颜色；内联SVG需清除fill属性并设fill="currentColor"，依赖父容器color值；拼data URI须用e()或%()转义SVG字符串。
Less 本身不能在运行时控制 SVG 颜色，它只能在编译期生成静态 CSS 或 data URI 字符串；真正起作用的是内联 SVG + currentColor，或用 Less 拼出带颜色值的 data URI —— 二者路径完全不同，混用必踩坑。
内联 SVG 必须清除 fill 属性才能用 currentColor
Less 在这里只是“辅助清理”或“生成模板”，不参与样式计算。关键动作全在 HTML 和 CSS 层：
-
fill="red"、stroke="#000"这类内联属性必须手动删掉，否则会直接覆盖fill: currentColor - 推荐写法是：
<svg fill="currentColor"><path d="..."></svg>，比 CSS 规则svg path { fill: currentColor; }更稳妥（透传给所有子元素） - 父容器必须有明确
color值，比如button { color: #28a745; }，否则继承链断在body默认色上 - 深色模式下，别只写
dark:text-white就完事——要确保父容器的color真的变了，否则currentColor读到的还是旧值
Less 拼 data URI 时必须用 e() 或 %() 转义 SVG 字符串
想让 Less 把颜色变量注入 SVG 路径里，不能直接拼接，否则编译失败或浏览器解析出错：
- SVG 原文含
<、>、"、&，必须转义；e()是最简方案，例如：e('<svg fill="@{color}"><path d="M0 0h1v1H0z"></path></svg>') - 更安全的做法是用
%()格式化：%('data:image/svg+xml,%3Csvg fill="%s"%3E%3Cpath d="M0 0h1v1H0z"/%3E%3C/svg%3E', @color)，其中%3C是<的 URL 编码 - IE 对
%23（即#）编码支持差，@color: #ff0000直接插进去可能失效；建议统一用rgb(255, 0, 0)或无#的十六进制如ff0000 - 构建工具（如 webpack）若对长 base64 字符串截断，就别硬塞进 Less，改用
@svg: ~"url('./icons/check.svg')"引入外部文件
别指望 Less 函数动态修改已加载的 SVG
Less 是预处理器，不是运行时引擎。以下操作全部无效：
立即学习“前端免费学习笔记（深入）”；
-
img[src$="icon.svg"] { fill: @primary; }——fill不是img的合法属性，浏览器直接忽略 - 用
lighten(@color, 10%)去调一个 background-image 中的 SVG 颜色 —— SVG 已是静态资源，Less 编译完就固定了 - 试图在 Mixin 里用
if()判断当前主题再切换 SVG 内容 —— 主题逻辑在 CSS 或 JS 层，Less 编译时根本不知道页面是否启用了 dark mode - 导出 SVG 时没关 “Preserve Illustrator editing capabilities”，结果残留大量冗余
style="fill:#333"，Less 无法自动清洗
真正难的不是写 Less 代码，而是判断该用哪条路：需要响应式换色？选内联 + currentColor；需要兼容老浏览器且图标固定？用 Less 拼 data URI；想维护一套可配置图标库？优先清理 SVG 源码，再封装语义化 Mixin，别让颜色逻辑散落在 HTML 和 Less 之间。
