内联svg是表格图标的最优解，需设viewbox、fill="currentcolor"、宽高用em/rem、vertical-align:middle对齐，并添加aria-hidden="true"。
表格里加小图标不是“塞进去就完事”，关键得让图标对齐、缩放可控、颜色可变、语义正确——否则要么错位，要么导出消失，要么屏幕阅读器读不出意图。
用内联 SVG 替代 <img> 是最稳的选择
直接写 <img src="icon.svg"> 在 <td> 里，Firefox 底部会多出 4px 空隙，Chrome 垂直对不齐，换主题还得改每个文件。内联 SVG 才真正可控。
<ul>
<li>必须带 <code>viewBox（如 viewBox="0 0 24 24"），否则缩放时拉伸或裁剪
fill、stroke 属性，只留 fill="currentColor"，靠父级 color 控制颜色em 或 rem：比如 width="1.2em" height="1.2em"，配合 vertical-align: middle 对齐文字aria-hidden="true"（因为已有 alt 或 aria-label）
image-rendering: crisp-edges 只对缩放中的位图生效
这个 CSS 属性对表格图标有用，但前提是：它得是 <img>，且浏览器真认为“正在缩放”。很多场景它压根不触发。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 原图就是 16×16，又只用
max-width: 16px限制 → 浏览器判定“未缩放”，属性失效 - 用了
srcset加载了 @2x 图（32×32），再显示在 16×16 单元格里 → 实际是等比渲染，插值没发生，image-rendering不介入 - 给
<table> 或 <code><td> 设置该属性 → 它只向下作用于满足缩放条件的 <code><img>，不是魔法开关 - SVG 不需要它——矢量图天生清晰，加了也白加
- 别把
<i class="fa-solid fa-info"></i>直接丢进<td> —— 改用 <code>display: inline-flex; align-items: center包一层容器 - 混用 Font Awesome 和 Material Symbols？检查
@font-face的font-family名是否冲突，开发者工具的 Computed 面板比肉眼靠谱 - tooltip 别只写
title在<i></i>上，用户看到的是 “fa-circle-info”，不是 “此项为系统自动生成”；应挂到外层容器，或用data-tooltip+::after -
alt必须描述动作，不是图标名；rel="noopener noreferrer"缺一不可，否则可能被劫持window.opener - 移动端小屏下图标挤在一起？别死守像素尺寸，用
max-width: 100%+ 媒体查询收缩，或直接上td { display: flex; justify-content: center; align-items: center; }
字体图标（如 Font Awesome）在表格里容易翻车
看似方便，但和表格的 line-height、vertical-align、font-size 一碰就偏移，混用不同库还会字形错乱。
社交类图标必须用 @#@#@#@#@#@#@#@#@#@0 是底线结构
最容易被忽略的一点：表格行高、border-collapse、font-size 变化都会悄悄影响图标位置和尺寸——内联 SVG 的 em 单位能自动响应，而 <img> 或字体图标往往需要额外 hack 才稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
