跳到主要内容
Termlib

样式与 CSS · 视觉设计

图标

Icon

也叫：Icon、图标库、SVG 图标、字体图标

用简洁的小图形表示操作或含义，比如放大镜表示搜索、垃圾桶表示删除，通常来自统一风格的图标库。

示例

详细解释

图标能节省空间、帮助快速识别，前提是含义大家都懂。放大镜、齿轮、垃圾桶、加号这类通用图标可以单独使用；含义不明显的图标最好配上文字，或至少加悬停提示。只有图标的按钮要加 aria-label 说明用途，读屏软件才能读出来。

主流做法是用 SVG 图标库，按需引入，可以随意改颜色和大小。常见的有 Lucide、Heroicons、Tabler Icons、Material Symbols，shadcn/ui 默认用 Lucide。一个项目只用一套图标库，保证线条粗细和风格统一，不要混用 emoji。

尺寸常用 16px、20px、24px 三档，颜色一般跟随文字颜色（currentColor），和文字并排时要垂直居中。

开发者信息
术语 ID
style-icon
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .anticon
  • .el-icon
  • [class*="MuiSvgIcon-root"]
  • .arco-icon
  • .t-icon
  • .n-icon
  • svg.lucide
  • svg[class*="lucide-"]
  • i[class^="fa-"]
  • i[class*=" fa-"]
  • i.fa
  • i.fas
  • i.far
  • i.fab
  • i[class^="bi-"]
  • .material-icons
  • .material-symbols-outlined
  • .material-symbols-rounded
  • .iconfont
  • i[class^="ri-"]
  • svg.icon
  • svg[data-icon]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • icon
  • icons
  • iconfont
  • svg-icon
  • ico
  • glyph
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Icon
  • SvgIcon
语义标签和角色

弱信号，要和其他线索一起才算识别出来。

  • <svg>
  • <i>
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 纯图标
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v1 · 更新于 2026/09/30