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