Layui如何实现在表格中显示自定义的SVG图标-Layui教程-PHP中文网

Layui表格templet中直接写会失效，因默认调用layui.util.escape()将标签转义为文本；解法是改用函数式templet返回未转义HTML，并确保SVG已提前注入DOM或改用更稳定的layui-icon字体图标。

templet里直接写`<svg></svg>`会失效？原因和解法

svg图标在layui表格单元格中不显示，大概率不是代码写错，而是被layui的dom清理机制过滤掉了。layui的templet默认对返回内容做layui.util.escape()处理，所有<svg></svg>、<use></use>等标签会被转义成纯文本。

解决办法只有一个：改用函数式templet并手动返回未转义的HTML字符串——但必须确保该字符串不含XSS风险字符（如<script></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></use>），确保<svg></svg>定义已提前注入顶部（比如用document.body.insertAdjacentHTML）
别在templet里动态fetch SVG 内容，异步返回会导致渲染时机错乱，图标闪一下再消失

用`layui-icon`类替代`<svg></svg>`更稳吗？

是的，绝大多数场景下更稳。Layui内置的字体图标本质就是CSS + Unicode，不依赖DOM结构，也不怕escape。只要确保layui.css加载完成、font-family没被覆盖，<i class="layui-icon layui-icon-download"></i>就能正常显示。

对比来看：

<i></i>图标：体积小、兼容性好、支持font-size/color直接控制、无跨域/加载失败问题
<svg></svg>图标：可精确控制路径、支持渐变/动画、但需管理<defs></defs>和xlink:href、容易因路径错误或注入时机不对而空白
如果你的SVG只是单色简单图形（如下载、编辑、删除），优先用layui-icon-xxx；只有需要多色、描边动画、或与设计稿像素级对齐时，才上<svg></svg>

自定义SVG图标集成到`layui-icon`体系

想让自己的SVG也能用class="layui-icon layui-icon-my-export"调用，就得走字体图标路线——这不是“引入SVG”，而是把SVG编译成字体文件，并挂载到Layui的图标字体栈里。

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

关键步骤：

用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></svg>必须带viewBox="0 0 24 24"（按你源SVG实际画布定）
加内联样式：style="width:18px;height:18px;vertical-align:middle;"，vertical-align用来对齐文字基线
禁用max-width: 100%这类全局重置样式，它会让SVG在小屏上被强制压缩变形
如果图标颜色要随文字变（比如color: #1E9FFF），得在<svg></svg>里用fill="currentColor"，而不是固定写#333