Lucide 中文文档

Appearance

图标设计原则 ​

以下是为 Lucide 创建图标时保持质量和一致性的规则。

1. 图标必须在 24×24 像素 的画布上设计。 ​

24×24 像素

2. 图标必须在画布内至少有 1 像素的内边距。 ​

1 像素内边距

3. 图标必须具有 2 像素的描边宽度。 ​

2 像素描边

4. 图标必须使用 圆形接头。 ​

圆形接头

5. 图标必须使用 圆形端点。 ​

圆形端点

6. 图标必须使用 居中描边。 ​

居中描边

7. 形状（如矩形）必须具有 边框半径为 ​

A. 大小至少为 8 像素时，2 像素 ​

2 像素边框半径

B. 大小小于 8 像素时，1 像素 ​

1 像素边框半径

8. 不同的元素之间必须有 2 像素的间距 ​

2 像素元素间距

2 像素元素间距-连接

2 像素元素间距-突然切断

9. 图标应与 circle 和 square 具有相似的光学体积。 ​

光学体积-理想

光学体积-低

光学体积-高

提示： 将您的图标放置在圆形或方形图标旁边，并对两者进行模糊处理；您的图标不应感觉比基本形状暗得多。

10. 图标应通过其重心在视觉上居中。 ​

视觉居中

视觉居中-不良

提示： 将您的图标放置在方形或圆形图标的上方/下方以及旁边，并检查它是否感觉偏离中心。对称图标应始终对齐到中心。

11. 图标应具有相似的视觉密度和细节水平。 ​

密度-理想

密度-高

提示： 尝试对密集元素进行抽象。模糊您的图标，当模糊时，它不应感觉过于黑暗。

12. 连续曲线应平滑连接。 ​

曲率-平滑

曲率-不均匀

提示： 确保使用圆弧或二次曲线。当使用三次曲线时，控制点应具有镜像角度以实现平滑曲线。

13. 图标应力求像素完美，以便在低 DPI 显示器上保持锐利。 ​

像素完美-理想

像素完美-不良

提示： 尽可能将元素和圆弧中心对齐到网格。

命名约定 ​

  1. 图标名称使用小写 kebab case。\ 例如：arrow-up 而不是 Arrow Up。

  2. 图标名称使用国际英语名称，而不是本地变体。\ 例如：color 而不是 colour。

  3. 图标应根据它们描绘的内容命名，而不是用例或代表的内容。\ 例如：floppy-disk 而不是 save，以及 circle-slash 而不是 ban。

  4. 属于一组的图标应命名为 <group>-<variant>。\ 例如：badge-plus 基于 badge。

  5. 备用图标的图标名称应代表使备用图标独特的内容，而不是编号。\ 例如：send-horizontal 而不是 send-2。

  6. 不允许包含数字的名称，除非图标本身表示数字。\ 例如：arrow-down-0-to-1 包含两个数字。

  7. 描绘不同大小的多个元素（例如，人和圆形）的图标必须按大小降序列出这些元素。\ 例如：如果圆形更大，它应该是 circle-person；如果人更大，它应该是 person-circle。

  8. 描绘大致相同大小的多个元素（例如，ruler 和 pencil）的图标必须按前后顺序列出这些元素，如果一个元素在前，则按英语阅读顺序（从上到下，从左到右）。\ 例如：如果 pencil 在 ruler 的前面、上方或左侧，它应该是 pencil-ruler；否则，它应该是 ruler-pencil。

  9. 描绘元素某种变体的图标必须使用 [element]-[modifier] 命名方案，修饰符分别应用于每个元素。\ 例如：虚线圆形必须命名为 circle-dashed，而不是 dashed-circle；并与前面的指南协调，包含破碎心脏的虚线圆形将命名为 circle-dashed-heart-broken，因为心脏比圆形小。

代码约定 ​

在将图标添加到库之前，我们希望有可读且优化的 SVG 代码。

全局属性 ​

对于每个图标，这些属性都会应用，对应上述规则。

xml
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <!-- SVGElements -->
</svg>

最小化路径 ​

路径的代码有时会变得相当大。为了减少文件大小，我们喜欢最小化代码。
我们推荐使用 Lucide Studio 来整理路径到 3 位精度。

允许的元素 ​

SVG 文件只能包含简单的路径和形状元素，这些元素除了大小和间距之外不得有任何属性。\ 实际上，只允许以下元素和属性：

  • <path d>
  • <line x1 x2>
  • <polygon points>
  • <polyline points>
  • <circle cx cy r>
  • <ellipse cx cy rx ry>
  • <rect x y width height rx>

这也意味着不允许使用变换、过滤器、填充或显式描边。

切勿使用 <use>。虽然它有时似乎是优化文件大小的好方法，但一旦 SVG 嵌入到 HTML 文档中，就无法确保引用的元素 ID 是唯一的。

JSON 元数据描述符 ​

添加的每个图标还必须附带一个匹配的 JSON 文件，列出图标的标签和类别。
请使用以下模板：

json
{
  "$schema": "../icon.schema.json",
  "contributors": [
    "github-username",
    "another-github-username"
  ],
  "tags": [
    "foo",
    "bar"
  ],
  "categories": [
    "devices"
  ]
}