跳转到内容

命名约定

了解如何为 Lucide 图标选择清晰且一致的名称

本页面介绍词序、修饰词、变体、相关图标以及其他有助于保持图标名称可预测的规则。

在命名新图标或审核建议名称时,可以参考这些规则。

1. 使用小写 kebab-case

图标名称必须使用小写 kebab-case。

arrow-up-0-1
Do

使用小写 kebab-case

Arrow Up 0-1arrowUp01
Don't

避免使用其他命名方案

2. 使用美式英语

图标名称必须使用美式英语,而不是其他地区的变体。

colormaximizecenter
Do
colourmaximisecentre
Don't

3. 根据图标所描绘的内容命名

图标名称必须描述图标所展示的内容,而不是描述人们可能如何使用它。

floppy-disk
Do

图标展示的是一张软盘

save
Don't

保存是一种使用场景

circle-slash
Do

图标展示的是一个带有斜杠的圆

ban
Don't

禁止是一种操作

TIP

同一个图标在不同产品中可能代表不同含义。根据外观为图标命名,可以使名称清晰且不依赖于使用场景。

4. 一致地命名相关图标

属于同一组的图标必须使用 <group>-<variant> 命名方案。

组名称放在前面,变体放在后面。

badge-plusbadge-check
Do

badge 是组名称

plus-badgecheck-badge
Don't

pluscheck 不是组名称

5. 描述替代图标

图标的替代版本必须根据其视觉差异进行命名。不要仅使用数字来区分不同版本。

send-horizontal
Do

该图标描绘的是一个水平的“发送”符号

send-2send-alt
Don't

“发送 2”和“替代发送”都不是清晰的名称

6. 仅在图标描绘数字时使用数字

除非图标展示了数字,否则图标名称不得包含数字。

arrow-down-0-1
Do

箭头从 0 指向 1

send-2
Don't

图标没有展示数字 2

clock-3
Do

指针指向 3 点钟方向

user-3
Don't

图标没有展示数字 3

不要使用数字来区分相似的图标。

7. 按大小排列元素

当图标展示多个大小不同的元素时,按从大到小的顺序排列名称。

对于包含圆和人物的图标:

moon-star
Do

moonstar

person-circle
Don't

person 没有circle

8. 按位置排列大小相近的元素

当图标描绘多个大小大致相同的元素时,其名称必须根据视觉位置排列。

如果元素相互重叠,则按从前到后的顺序命名。

如果元素不重叠,则按照英语阅读顺序命名:从上到下,然后从左到右。

pencil-ruler
Do

pencil 位于 ruler 前面,因此排在前面

ruler-dimension-line
Do

尺子位于尺寸线下方,但它更大,因此排在前面

sun-snow
Do

sun 位于雪花的左侧,因此排在前面

ruler-pencil
Don't

尺子位于铅笔下方,因此 pencil-ruler 才是正确的名称

9. 将修饰词放在其描述的元素之后

修饰词必须放在其描述的元素之后:<element>-<modifier>

heart-broken
Do

图标展示的是一颗碎裂的

broken-bone
Don't

图标展示的是一根断裂的骨头,因此应命名为 bone-broken

当图标包含多个带修饰词的元素时,每个修饰词必须跟在其描述的元素之后。

circle-fading-arrow-up
Do

图标展示的是一个渐隐的圆,圆内有一个指向上方的箭头

circle 排在前面,因为它比 arrow 大。fading 跟在 circle 后面,因为它修饰的是圆。up 跟在 arrow 后面,因为它修饰的是箭头

notepad-text-dashed
Don't

该图标展示的是一个带虚线边框、内部有文字的记事本,因此应命名为 notepad-dashed-text

notepad 排在前面,因为它比 text 大。dashed 跟在 notepad 后面,因为它修饰的是记事本。text 跟在二者后面,因为 dashed 不修饰 text

总结

命名图标时:

  1. 描述你看到的内容,而不是图标可能代表的含义
  2. 使用美式英语小写 kebab-case
  3. 使用 <group>-<variant>相关图标放在一起
  4. 描述替代图标的独特之处,而不是使用数字编号
  5. 仅在图标描绘数字时使用数字
  6. 按从大到小的顺序排列元素
  7. 如果元素大小大致相同,则按从前到后的顺序排列,否则按照英语阅读顺序排列
  8. 将修饰词放在其描述的元素之后<element>-<modifier>