Layui表格templet中直接写<svg>会失效，因默认调用layui.util.escape()将标签转义为文本；解法是改用函数式templet返回未转义HTML，并确保SVG已提前注入DOM或改用更稳定的layui-icon字体图标。
templet里直接写<svg>会失效？原因和解法
svg图标在layui表格单元格中不显示，大概率不是代码写错，而是被layui的dom清理机制过滤掉了。layui的templet默认对返回内容做layui.util.escape()处理，所有<svg>、<use>等标签会被转义成纯文本。
解决办法只有一个：改用函数式templet并手动返回未转义的HTML字符串——但必须确保该字符串不含XSS风险字符（如<script>）。
- 写法示例：
templet: function(d) { return '<svg class="icon" viewbox="0 0 24 24"><use xlink:href="#icon-download"></use></svg>'; } - 不能写成字符串模板：
templet: '<svg>...</svg>'—— 这种会被自动escape - 如果用了雪碧图（
<use>），确保<svg>定义已提前注入<body>顶部（比如用document.body.insertAdjacentHTML） - 别在
templet里动态fetchSVG 内容，异步返回会导致渲染时机错乱，图标闪一下再消失
用layui-icon类替代<svg>更稳吗？
是的，绝大多数场景下更稳。Layui内置的字体图标本质就是CSS + Unicode，不依赖DOM结构，也不怕escape。只要确保layui.css加载完成、font-family没被覆盖，<i class="layui-icon layui-icon-download"></i>就能正常显示。
对比来看：
-
<i>图标：体积小、兼容性好、支持font-size/color直接控制、无跨域/加载失败问题 -
<svg>图标：可精确控制路径、支持渐变/动画、但需管理<defs>和xlink:href、容易因路径错误或注入时机不对而空白 - 如果你的SVG只是单色简单图形（如下载、编辑、删除），优先用
layui-icon-xxx；只有需要多色、描边动画、或与设计稿像素级对齐时，才上<svg>
自定义SVG图标集成到layui-icon体系
想让自己的SVG也能用class="layui-icon layui-icon-my-export"调用，就得走字体图标路线——这不是“引入SVG”，而是把SVG编译成字体文件，并挂载到Layui的图标字体栈里。
关键步骤：
- 用IcoMoon或Fontello上传你的SVG，导出
.woff、.eot等格式字体包 - 把字体文件放进项目
/fonts/目录，在CSS中扩展@font-face，并声明新类名：.layui-icon-my-export:before { content: "\e001"; } - 务必加
!important覆盖Layui原有font-family声明，否则图标显示为方块 - 不要删掉原生
layui-icon的@font-face，新字体应作为补充，避免破坏已有图标 - 测试时打开DevTools检查元素computed样式，确认
font-family最终生效的是你新增的字体名
移动端SVG图标偏移、缩放失真怎么办
SVG在手机上显示错位或模糊，90%是因为没设viewBox或width/height不匹配。Layui表格单元格默认有padding和line-height，SVG若没明确尺寸，会按默认1em撑开，导致上下留白或裁切。
实操建议：
- 所有
<svg>必须带viewBox="0 0 24 24"（按你源SVG实际画布定） - 加内联样式：
style="width:18px;height:18px;vertical-align:middle;"，vertical-align用来对齐文字基线 - 禁用
max-width: 100%这类全局重置样式，它会让SVG在小屏上被强制压缩变形 - 如果图标颜色要随文字变（比如
color: #1E9FFF），得在<svg>里用fill="currentColor"，而不是固定写#333
最易被忽略的一点：表格列宽由Layui自动计算，但SVG本身不参与宽度测量。如果图标太宽，可能挤占文字空间，导致文本换行——这时候宁可缩小SVG尺寸，也不要靠white-space: nowrap硬撑。
