layui-icon不支持直接引入SVG文件，因其基于字体图标体系；自定义SVG图标需手动拼接字符串或编译为字体文件注入；函数式templet中返回SVG必须确保symbol已提前注入DOM。
layui-icon 不能直接引入 SVG 文件
layui 的 layui-icon 是字体图标体系，底层靠 @font-face 加载 .woff/.ttf 字体文件，不支持把单个 .svg 文件“塞进去”就生效。你扔一个 my-icon.svg 到项目目录、再改 CSS 引用路径，图标一定不会显示——字体图标和 SVG 文件是两类完全不同的渲染机制。
想用自定义 SVG 图标，只有两条路可走
第一是「绕过 layui-icon，手动拼 SVG 字符串」，第二是「把 SVG 编译成字体文件，注入到 layui-icon 字体栈」。前者快但受限多，后者稳但要构建步骤。
- 函数式
templet中返回未转义的<svg><use xlink:href="#my-icon"></use></svg>—— 必须确保该<svg>定义（含<defs>）已提前注入<body>顶部，且不能异步加载 - 用 iconfont.cn 或 IcoMoon 把你的 SVG 导出为字体包（.woff + .css），把新 CSS 放在
layui.css之后引入，并统一使用独立前缀如icon-my-export，避免和.layui-icon冲突 - 别试图覆盖
layui-icon的@font-face声明——2.8+ 版本已内联 SVG 字体数据，CSS 层面覆盖无效
templet 里写 SVG 容易踩的坑
常见错误不是代码写错，而是时机或结构不对：
-
templet: '<svg><use href="#x"></use></svg>'→ 被layui.util.escape()转义成纯文本，必须改成函数式：templet: function(d) { return '<svg><use href="#x"></use></svg>'; } -
<use href="#x">指向的<symbol id="x">没提前注入 DOM → 渲染为空白，建议在<body>开头用document.body.insertAdjacentHTML('afterbegin', svgSpriteString) - 在
templet里调fetch()动态拉 SVG 内容 → 渲染完成时内容还没回来，图标闪一下消失，绝对禁止
更推荐用 layui-icon 替代 SVG 的场景
如果你的图标只是单色、静态、不需要像素级描边控制（比如下载、编辑、刷新、删除），直接用 <i class="layui-icon layui-icon-download"></i> 更省事：
- 不依赖 DOM 注入时机，不怕
escape()，不担心跨域或 404 - 支持
font-size、color直接缩放和着色，无需额外 CSS 控制 fill/stroke - 所有 layui 组件（table、form、layer）都原生兼容，不用 hack 渲染逻辑
真正需要 SVG 的，只发生在必须多色、带渐变、做 CSS 动画、或设计稿要求 1:1 路径对齐的时候——这种需求本身就不该交给字体图标解决。
