命名约定
了解如何为 Lucide 图标选择清晰且一致的名称
本页面介绍词序、修饰词、变体、相关图标以及其他有助于保持图标名称可预测的规则。
在命名新图标或审核建议名称时,可以参考这些规则。
1. 使用小写 kebab-case
图标名称必须使用小写 kebab-case。
arrow-up-0-1使用小写 kebab-case
Arrow Up 0-1 或 arrowUp01避免使用其他命名方案
2. 使用美式英语
图标名称必须使用美式英语,而不是其他地区的变体。
color、maximize、centercolour、maximise、centre3. 根据图标所描绘的内容命名
图标名称必须描述图标所展示的内容,而不是描述人们可能如何使用它。
floppy-disk图标展示的是一张软盘
save保存是一种使用场景
circle-slash图标展示的是一个带有斜杠的圆
ban禁止是一种操作
TIP
同一个图标在不同产品中可能代表不同含义。根据外观为图标命名,可以使名称清晰且不依赖于使用场景。
4. 一致地命名相关图标
属于同一组的图标必须使用 <group>-<variant> 命名方案。
组名称放在前面,变体放在后面。
badge-plus & badge-checkbadge 是组名称
plus-badge & check-badgeplus 和 check 不是组名称
5. 描述替代图标
图标的替代版本必须根据其视觉差异进行命名。不要仅使用数字来区分不同版本。
send-horizontal该图标描绘的是一个水平的“发送”符号
send-2 或 send-alt“发送 2”和“替代发送”都不是清晰的名称
6. 仅在图标描绘数字时使用数字
除非图标展示了数字,否则图标名称不得包含数字。
arrow-down-0-1箭头从 0 指向 1
send-2图标没有展示数字 2
clock-3指针指向 3 点钟方向
user-3图标没有展示数字 3
不要使用数字来区分相似的图标。
7. 按大小排列元素
当图标展示多个大小不同的元素时,按从大到小的顺序排列名称。
对于包含圆和人物的图标:
moon-starmoon 比 star 大
person-circleperson 没有比 circle 大
8. 按位置排列大小相近的元素
当图标描绘多个大小大致相同的元素时,其名称必须根据视觉位置排列。
如果元素相互重叠,则按从前到后的顺序命名。
如果元素不重叠,则按照英语阅读顺序命名:从上到下,然后从左到右。
pencil-rulerpencil 位于 ruler 前面,因此排在前面
ruler-dimension-line尺子位于尺寸线下方,但它更大,因此排在前面
sun-snowsun 位于雪花的左侧,因此排在前面
ruler-pencil尺子位于铅笔下方,因此 pencil-ruler 才是正确的名称
9. 将修饰词放在其描述的元素之后
修饰词必须放在其描述的元素之后:<element>-<modifier>。
heart-broken图标展示的是一颗碎裂的心
broken-bone图标展示的是一根断裂的骨头,因此应命名为 bone-broken
当图标包含多个带修饰词的元素时,每个修饰词必须跟在其描述的元素之后。
circle-fading-arrow-up图标展示的是一个渐隐的圆,圆内有一个指向上方的箭头
circle 排在前面,因为它比 arrow 大。fading 跟在 circle 后面,因为它修饰的是圆。up 跟在 arrow 后面,因为它修饰的是箭头
notepad-text-dashed该图标展示的是一个带虚线边框、内部有文字的记事本,因此应命名为 notepad-dashed-text
notepad 排在前面,因为它比 text 大。dashed 跟在 notepad 后面,因为它修饰的是记事本。text 跟在二者后面,因为 dashed 不修饰 text
总结
命名图标时:
- 描述你看到的内容,而不是图标可能代表的含义
- 使用美式英语和小写 kebab-case
- 使用
<group>-<variant>将相关图标放在一起 - 描述替代图标的独特之处,而不是使用数字编号
- 仅在图标描绘数字时使用数字
- 按从大到小的顺序排列元素
- 如果元素大小大致相同,则按从前到后的顺序排列,否则按照英语阅读顺序排列
- 将修饰词放在其描述的元素之后:
<element>-<modifier>