# @crewlethq/icons 中文文档

规范地址：https://npmcn.com/package/%40crewlethq/icons/

版本：0\.84\.2
npm 元数据更新时间：2026-10-31T19:59:03.528Z
中文译文更新时间：2026-10-31T22:32:51.160Z
软件包许可：MIT AND ISC

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40crewlethq/icons
原文对照：https://npmcn.com/package/%40crewlethq/icons/?lang=original
项目主页：https://github.com/crewlet/uilet/tree/main/packages/icons#readme
源码仓库：https://github.com/crewlet/uilet

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.6 MB，255 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18
- 首次发布：2026-09-14T02:02:31.454Z
- 最新版本发布：2026-10-31T19:59:03.184Z
- 已发布版本数：129（近 12 个月 129 个）

## 中文简介

Crewlet签名插图图标、供应商标志和Lucide字形设置为React组件。

## 安装

```sh
npm install @crewlethq/icons
```

也可以使用：`pnpm add @crewlethq/icons`、`yarn add @crewlethq/icons`、`bun add @crewlethq/icons`

## README

# @crewlethq /图标

Crewlet表面绘制的所有非文本内容：Lucide符号集、与平台集成的应用程序的标记以及Crewlet签名插图。

这三个都是从包中附带的SVG文件编译的React组件。这里没有从另一个主机获取字体、精灵或图像，所以封闭网络绘制的内容与开放网络完全相同。

| 什么 | 进口的 | 看起来像 |
| --- | --- | --- |
| 象形文字（Lucide，在24格上描边） | `@crewlethq/icons/glyphs` | `<XGlyph size="md" />` |
| 从值中选择的符号 | `@crewlethq/icons/glyphs/registry` | `glyphByName(name)` |
| 供应商是 | `@crewlethq/icons` | `<VendorMark vendor="slack" />` |
| 签名的插图 | `@crewlethq/icons` | `<AgentReading />`， `<Icon name="AgentReading" />` |
| 克鲁莱特这个角色 | `@crewlethq/icons` | `<CrewletFigure motion="wave" />` |
| 三十个特工角色 | `@crewlethq/icons/characters` | `<CrewletCharacter character="hexlet" />` |
| 产品标志 | `@crewlethq/icons/product-mark` （也是词根） | `<ProductMark product="assistant" />` |

## 符号

```tsx
import { StarGlyph, XGlyph } from '@crewlethq/icons/glyphs';

<XGlyph size="md" />
<XGlyph size="lg" title="Close" />
<StarGlyph filled={kept} />
```

Lucide图纸，卖主从不变 `lucide-static` 并按照批准的设计绘制它们：在24个单位的网格上画一个笔画，重量为1.75，有圆形的帽和圆形的连接。 [`glyphs/README.md`](https://npmcn.com/package/%40crewlethq/icons/glyphs/README.md) 记录该集合包含哪些符号及其原因、它们的来源、校验和以及如何添加或替换一个符号。

| 道具 | 类型 | 默认的 | 目的 |
| --- | --- | --- | --- |
| `size` | `'xs' | 'sm' | 'md' | 'lg' | 'xl'` （12,14,16,20,24）， px的数字，或任何CSS长度 | `'1em'` | 它有多大的吸引力。 |
| `title` | 字符串 | 无 | 为辅助技术命名字形。没有一个象形符号 `aria-hidden` 而且无法聚焦，就在标签旁边的地方。 |
| `filled` | 布尔 | `false` | 在文本颜色中绘制绘图的内部。只有一个字形列在 `FILLABLE` 需要它;见下文。 |

调用者在图标上设置的其他SVG属性都要经过（类、样式、颜色、处理程序和属性） `aria-` 或者 `data-` 属性), `className` 添加到组件自己的 `crewlet-glyph`． 框架所拥有的并不： `viewBox`， `fill`， `strokeWidth`， `strokeLinecap` 和 `strokeLinejoin` 它们不是道具，并且框架将它们保留下来，即使是针对类型没有到达的调用者，因为每个类型更改的是绘图，而不是它的位置或大小。

**名字是Lucide的，带 `Glyph` 后缀,** 因为赤裸裸的文字碰撞： `Timeline`， `List`， `Menu`， `Tag`， `Link` 和 `Code` 都是 `@crewlethq/ui` 组件，并且采用其中一个名称的符号将在每个需要这两个名称的导入站点上显示组件。 `x` 是 `XGlyph`， `chevron-down` 是 `ChevronDownGlyph`， `columns-3` 是 `Columns3Glyph`. `GLYPH_NAMES` 列出每个供应商的名称和 `GlyphName` 是它们的联合，因此包中没有发布的名称是编译错误。

### 中风

重量是24网格的1.75个单位，Lucide自己的文件是2个单位，并且它按照设计的方式缩放字形：16像素的字形绘制1.17像素的线，24像素的字形绘制1.75像素的线。 `--crewlet-glyph-stroke` 为设置它的元素下的每个字形移动它，这是一种方法：

```css
.dense-toolbar {
  --crewlet-glyph-stroke: 2;
}
```

字形携带两次权重：作为读取变量的样式，以及作为普通样式 `stroke-width="1.75"` 属性下呈现在服务器上的标记 `style-src` 拒绝样式属性的策略仍然按设计权重绘制，而不是按SVG默认值1绘制。 `GLYPH_STROKE` 是你自己的一幅画的数字，它站在一个象形文字旁边。

### 填充状态

**只有一个 `FILLABLE` 字形需要 `filled`.** 只有在画成一个封闭的剪影时，画在里面的笔画才称为标记： `bell` 有一个开放的拍子，将填充成一个团，并通过它的一条线，和 `compass` 和 `target` 都是封闭的，但会填入一个圆盘，没有留下任何东西来说明它是哪个圆盘。所以 `FILLABLE` 这是一个关于意义的决定，而不是几何形状的属性，建筑拒绝了一个名字，它的画有一个开放的笔画，而其他每一个字形的组成部分都没有 `filled` 所以传递一个是编译错误。它是 `['star', 'mouse-pointer-2']` 今天：Crewlet控制台最喜欢的开关的保持状态，以及合作者的实时光标，一个在他们的存在色调的固体指针。

一个表面上的象形画有两种状态 `FILLABLE` 不覆盖更改颜色或更改字形，而不是填充。

### 从值中选择字形

```ts
import { glyphByName } from '@crewlethq/icons/glyphs/registry';
```

**该条目包含每个字形**，因为按名称查找是对所有名称进行查找。当名称实际上是数据（导航表、事件类别、配置的集成类型）时，这是正确的交易，而在其他地方则是错误的交易，这就是为什么它是一个单独的条目：导入一个字形的代码永远不会到达它。答案是在该名称下注册的组件，具有自己的类型： `glyphByName('star')` 需要 `filled` 和 `glyphByName('x')` 没有。

## 供应商是

```tsx
import { VendorMark } from '@crewlethq/icons';

<VendorMark vendor="slack" size={24} />
<VendorMark vendor="datadog" size={24} muted />
```

| 道具 | 类型 | 默认的 | 目的 |
| --- | --- | --- | --- |
| `vendor` | `Vendor`： `'atlassian' | 'claude' | 'clickup' | 'crewlet' | 'datadog' | 'discord' | 'figma' | 'github' | 'gitlab' | 'mattermost' | 'microsoft-teams' | 'notion' | 'opencode' | 'slack' | 'telegram'` | 要求 | 马克。 |
| `size` | 作为 `Glyph` | `'1em'` | 它有多大的吸引力。 |
| `title` | 字符串 | 无 | 命名标记。没有它就是 `aria-hidden`. |
| `muted` | 布尔 | `false` | 对于可用但未连接的应用程序，耗尽颜色。 |

**这是设计系统绘制其他人颜色的地方。** 这里的颜色带有状态，而不是身份，第三方应用程序的标记是故意的例外：标识正是标记的作用，而重新上色的Slack标记不是Slack的。没有色调 `svg/vendor/` 是一个令牌，没有东西从标记中读取状态，并且标记只出现在它所属的应用程序的名称旁边。

GitHub的，概念和OpenCode的标记是单色的设计，并采取当前的文本颜色，所以他们在任何一个主题上阅读。这是每个供应商自己的指示，而不是豁免：每个人都发布一个标记，在浅色地面上黑色，在深色地面上白色，所以无论选择哪个主题，固定的十六进制都是错误的。

**`claude` 和 `opencode` 为模型运行的代码CLI命名** （Claude Code和OpenCode）。克劳德的是克劳德火花（克莱）从人类学的新闻工具包anthropic.com/press-kit；OpenCode的标志来自OpenCode .ai/brand。每个商标都是其所有者的商标。

**`crewlet` 是克鲁莱特自己的记号吗**，用于其内置的服务（Worklet, Doclet），其中目录将它们列在它们所代表的第三方应用程序旁边。这是从包装上已有的品牌标志中提取出来的(`svg/crewlet-icon.svg`， `CrewletIcon`)，而不是第二份副本，并且取相同的副本 `size` 和 `muted` 和其他供应商一样。

一个标记保持它自己的viewBox，所以一个不是正方形的（Figma的是2:3）被绘制来适合正方形 `size` 以供应商绘制的纵横比为中心。每个绘图都将viewBox边沿填满，因此目录中的标记具有相同的重量：GitLab的绘图被裁剪为其徽标（其新闻工具包文件将徽标框在其自身宽度的两倍内，并以其旁边每个标记的一半大小绘制），而Crewlet的是将品牌标记框在其自身范围内，而不是在宽文件的艺术品边距中，因此它绘制槽的全宽度。

标记和它们可能使用的条款在 [`TRADEMARKS.md`](https://npmcn.com/package/%40crewlethq/icons/TRADEMARKS.md)，它在包裹中发货。Mattermost, Datadog, Notion, Discord, ClickUp， Telegram和Microsoft Teams的图纸是Simple Icons的渲染图，其路径数据为CC0 1.0。

`VENDORS` 列出包裹上的每一个标记。

## 产品标志

```tsx
import { ProductMark } from '@crewlethq/icons/product-mark';

<ProductMark product="worklet" size={24} />
<ProductMark product="chat" size="md" soon />
<ProductMark product="assistant" size="sm" title="Ask Crewlet" />
```

`@crewlethq/icons/product-mark` 是自己的分数，用的是什么 `ProductMark`， `PRODUCTS` 和它们的类型和没有别的：它的进口图形达到图纸，字形框架和 `ProductMark.css`，而不是带有插图、供应商标记及其样式表的根，因此，无论捆绑器如何处理根的副作用，绘制一个标记（询问按钮）的第一个paint都要为此付出代价。根目录仍然导出相同的函数； `test/bundle.test.mjs` 保存条目的图形及其构建所携带的内容（所有8个图形大约为6 KB）。

| 道具 | 类型 | 默认的 | 目的 |
| --- | --- | --- | --- |
| `product` | `Product`： `'worklet' | 'doclet' | 'chat' | 'assistant'` | 要求 | 哪个是克鲁莱特自己的产品？ |
| `size` | 作为 `Glyph` | `'1em'` | 它有多大的吸引力。 |
| `drawing` | `ProductMarkDrawing`： `'auto' | 'small' | 'master'` | `'auto'` | 哪张画要挂上去。 `auto` 在24像素以下安装16像素的网格图，在24像素以上安装母版(参见 [两个图纸](https://npmcn.com/package/%40crewlethq/icons/#readme-two-drawings)）。 |
| `title` | 字符串 | 无 | 命名标记。没有它就是 `aria-hidden`. |
| `soon` | 布尔 | `false` | 画一个没有中空的产品：一个淡紫色的主体在紫色的关键线和图形下。永远不要灰色，这就是供应商标记“未连接”的意思。 |

Crewlet内置的四项服务都有自己的标志，取自品牌标志的结构。 `PRODUCTS` 列出它们。将“询问Crewlet”标记与其名称配对（在导航栏和目录中，按钮上都有“询问Crewlet”字样），因为一个亮点本身也被视为“新的”或“最喜欢的”；出于同样的原因，Crewlet自己的“新”和“即将”球杆从不使用四星。

| 产品 | 数字 |
| --- | --- |
| `worklet` （项目和任务） | 一个大勾号表示已完成的任务在一个开放的行上；一个中空的倒角框和它的线表示尚未完成的任务。做的是实而重，开的是空而轻。 |
| `doclet` （空格和页面） | 一个页面的一角被品牌自己的45度倒角折叠，带有标题块和两行文本。 |
| `chat` （与代理商交谈） | 一个倒角的语音气泡，它的一个水平窗口是机组人员的遮阳板，穿过瓷砖。他们家只有一个人，没有眼睛，也没有脸。 |
| `assistant` （作为签到人问克鲁莱特本人） | 一个四点凹火花，在45度轴上有一个小的伴生火花，指向八边形的右上角倒角。无脸：Ask Crewlet没有自己的身份，所以它是Crewlet的一种能力，而不是一个乘员。 |

### 建设

所有四个都站在一个瓷砖上：船员头部的八角形在48个单位网格上，插入2个单位，有9个单位的45度倒角，所以它的重量位于供应商标志的旁边。较低的面使其具有品牌标记的深度。一个白色的图形将它们区分开来，每条直边都是正交的或真正的45度对角线，每条曲线都是圆弧，所以没有大小显示楼梯。内部细节总是通过瓷砖的淘汰赛，从来没有第二个色调。 每个文件都有几个路径，每个路径都标有它所扮演的角色：

| `data-part` | 它是什么？ | 在 |
| --- | --- | --- |
| `body` | 八角形瓷砖。 | 每一个图 |
| `shade` | 下关节面。 | master和app tile |
| `keyline` | 不久的戒指，隐藏(`fill="none"`)直到很快的规则描绘它。 | 主控和16像素网格绘制 |
| `detail` | 白色的身影。 | 每一个图 |
| `ground` | 瓷砖后面的满血方块。 | 应用程序标题 |

### 颜色

| 颜色 | 十六进制 | 在 |
| --- | --- | --- |
| 品牌紫 | `#7c56ff` | 瓷砖(`body`)，以及键位和图形。4.23:1在明亮的地面，4.25:1在黑暗的地面。 |
| 深紫色 | `#6a3cff` | 下关节面(`shade`)，以及应用程序贴片的地面。装饰性：与瓷砖的比例为1.25:1，所以它永远不会有轮廓。 |
| 最深的紫色 | `#5c24ff` | 应用程序的面，更深一步，所以它仍然读取瓷砖的地面。 |
| 白色 | `#ffffff` | 图。4.53:1在瓷砖上。 |

没有其他：没有渐变和其他色调，在任何文件。这些标志在两个主题中都保留了这些颜色，就像品牌标志一样，因为它们是它的身份。 `test/products.test.mjs` 将每个文件保存到它们。

### 两个图纸

每个产品有两张图纸。主, `svg/product/<product>.svg` 在 `0 0 48 48`，提供24像素及以上的服务，其中每个正交边缘落在整个像素上。16像素网格图， `svg/product/small/<product>.svg` 在 `0 0 16 16`，服务于16到20像素：瓷砖完全没有面（主的2单位插入将是一个模糊的三分之二像素），并且每个图形都在整个像素上重新绘制，墙壁和计数器至少为一个像素。它在2x处也是32px。在20像素处，它以1.25x绘制，设计稍微柔和。

`drawing="auto"` 读取 `size`一步之遥 `xs` 来 `lg`一个数字或长度 `px` 24以下安装16像素网格图，24以上安装主图。另一个单位的大小（默认值） `1em`,一个 `rem`)在渲染时无法测量，所以它需要master；通过 `drawing="small"` 这样的标记放在一行正文文本中，和 `drawing="master"` 让主人保持在任何尺寸。

### 很快

`soon` 从安装的绘图派生，无论大小如何，都没有第二个文件。 `ProductMark.css` 将主体降低到8%的色调，隐藏面，并将隐藏的键线（在母版上为3个单位，在16网格上为一个完整的像素）和图形绘制为品牌紫色。键线的内部轮廓与外部轮廓相反，因此在任何填充规则下它都保持中空。在16网格声明的键线的一个像素内的部分 `data-soon="tuck"` 并在其中心以0.9的比例绘制（只有Ask Crewlet标志的主要亮点）。国家是一个阶级， `crewlet-product-mark--soon`，所以严格。 `style-src` 从不拒绝。

**在强色下** （Windows高对比度）一个标记在读者的系统颜色中画出它的一种颜色：平铺和面 `CanvasText` 与数字敲出 `Canvas`，使每个图形在任何调色板上都可读。很快保持其空心键线和图形 `CanvasText`我只有一半力气。

### 运动

这些标记永远不会自己移动。Ask Crewlet标志的主要火花携带 `data-motion="turn"` 和它的同伴 `data-motion="twinkle"`，在两个图纸中，所以一个工作状态可以移动它们； `ThinkingIndicator` 在 `@crewlethq/ui` 拥有那个动议。在一段时间内 `--motion-duration-spark` （1.6秒），火花围绕自己的中心转了四分之一圈，从中间转到0.8，这样它的尖端就会通过它们之间的紫色伴侣，而伴侣则下降到0.7和一半的强度；另一半时间都休息。下 `prefers-reduced-motion: reduce` 两个动画都停止了，标记保持静止的工作姿势（火花为0.8，同伴为0.7，强度为一半）。任何其他移动这些部件的宿主都将它们与之一起转动 `transform-box: fill-box; transform-origin: center`，在一次变换中保持旋转和缩放，并在减少运动时停止它们。

### 应用瓷砖

为每个产品提供一个180像素的应用程序平铺，作为原始文件而不是组件 `apple-touch-icon`网单或目录；

```ts
import workletTile from '@crewlethq/icons/svg/product/app-tile/worklet.svg';
```

```html
<link rel="apple-touch-icon" href="/worklet-180.png" />
```

所有四个共享一个框架上 `0 0 180 180`大出血 `#6a3cff` 地面，八角形重绘180像素 `#7c56ff` 它的下关节面在里面 `#5c24ff`大师的身材在绝对坐标中占80%。每个图形都位于72px可屏蔽的安全区域内，因此清单可以将从中导出的PNG列为 `any maskable`;圆形或圆形遮罩裁剪八边形的角，这是预期的。光栅管道从该文件导出PNG，并从16像素网格图（16像素，在2x时为32像素）导出favicons。对图形的更改也会写入其应用程序标题中。

### 原始文件

| 文件 | 使用 |
| --- | --- |
| `@crewlethq/icons/svg/product/<product>.svg` | 主, `0 0 48 48`. |
| `@crewlethq/icons/svg/product/small/<product>.svg` | 16像素网格图， `0 0 16 16`. |
| `@crewlethq/icons/svg/product/app-tile/<product>.svg` | 应用程序标题， `0 0 180 180`. |

标记的来源是这些文件： `npm run build` 将每个产品的母版和16像素网格图编译成 `ProductMark`，并且拒绝一个只有其中一个而没有另一个的产品。

## 签名的插图

```tsx
import { AgentReading, CrewletIcon } from '@crewlethq/icons';

<AgentReading style={{ fontSize: 32 }} />
```

每个插图都是一个命名的导出，绑定器只保留导入的那个。还有一个by-name组件：

```tsx
import { Icon } from '@crewlethq/icons';

<Icon name="AgentReading" size="lg" title="Documentation" />
```

`size` 接受 `'sm' | 'md' | 'lg' | 'xl'` （16,20,24和32px）， px数，或任何CSS长度。 `title` 将图标显示给辅助技术 `role="img"`;没有它，图标是 `aria-hidden`. `name` 键入如下 `IconName`，所以包没有发布的名称是编译错误； `ICON_NAMES` 按文件名顺序列出它们，它是一个集合而不是一个序列，因为添加或重命名插图会改变顺序。

**`Icon` 将每个插图都包含在包中**大约有半兆字节，几乎是全部 `crewlet-reading`． 按名称查找是对所有组件进行查找，因此在名称实际上是data的地方使用它，并在其他地方导入组件。

### 原始SVG文件

源svg包含在包中，并导出为 `@crewlethq/icons/svg/*`例如： `<img>`一个图标或任何其他需要文件而不是React组件的界面；

```ts
import markUrl from '@crewlethq/icons/svg/crewlet-icon.svg';
```

打包器将导入解析为URL。在捆绑器之外，用 `import.meta.resolve('@crewlethq/icons/svg/crewlet-icon.svg')` 获取磁盘上的文件。出售的象形图以相同的方式导出 `@crewlethq/icons/glyphs/x.svg`，随身携带的驾照也一样 `@crewlethq/icons/glyphs/LICENSE`． 原始文件是上游的绘图，在上游的行程为2；组件是在设计的1.75中绘制的。

### 网站图标

一个图标槽是方形的，标记是3:2，所以标记位于标签中间，无论链接的是哪个文件：框架不能使一个宽的绘图填充方形。什么 `favicon/` 取而代之的是一个正方形的源，这是光栅管道和搜索引擎都要求的。谷歌只考虑一个候选图标，如果它是正方形且大于48px，并且每个从标记渲染png的生成器都从其viewBox中获取填充，而不是自己创造填充。方形框架也将宽文件本身的边距修剪掉，因此相同的路径在相同的槽中绘制的大小约为8%。

| 文件 | 为 |
| --- | --- |
| `favicon/crewlet.svg` | 任何产品的 `<link rel="icon">`． 标记，方框。 |
| `favicon/crewlet-admin.svg` | 操作员控制台，红色，一眼就能区分超级管理员选项卡和租户选项卡。 |
| `favicon/crewlet.ico` | 栅格后退，在16,32和48像素，为浏览器或书签要求一个。 |

```html
<link rel="icon" type="image/svg+xml" href="/crewlet.svg" />
<link rel="icon" sizes="any" href="/favicon.ico" />
```

这三个都是一幅图：方形文件是 `svg/crewlet-icon.svg` 路径对路径，不同的只是viewBox框架和填充。 `test/brand.test.mjs` 认为，因为四个产品各自保留了自己的标记副本和一个图纸漂移的副本。它还会根据里面的绘图来测量边框，所以一个方形的viewBox会截断标记，使其偏离中心，或者让它在空中游泳，而不是运输：一个图标是一个没有人会仔细观察到的资产。

### CrewletFigure

`CrewletFigure` 将Crewlet角色渲染为五个独立的动画身体部分：

```tsx
import { CrewletFigure } from '@crewlethq/icons';

<CrewletFigure motion="wave" style={{ fontSize: 96 }} />
```

| 道具 | 类型 | 默认的 | 目的 |
| --- | --- | --- | --- |
| `motion` | `CrewletMotion`： `'idle' | 'dance' | 'wave' | 'jump' | 'walk' | 'spin'` | `'idle'` | 循环运动。 |
| `delay` | (秒数) | `0` | 相位偏移，使几个图形不同步移动。 |
| `color` | CSS色彩 | `--color-brand-mark`，又回到了船员紫色 | 身体填满。 |
| `fillGaps` | 布尔 | `true` | 用身体支撑每个关节，所以移动的肢体永远不会露出缝隙。 `false` 渲染普通的装饰，在那里的部分满足可见的接缝。 |

这个数字缩小了 `em` 就像图标集 `font-size` 或通过 `width` 和 `height`)和 `aria-hidden`;当图形有意义时，给周围的元素一个可访问的名称。当用户希望减少运动时，每个运动都会停止。几何存在于 `src/crewletParts.ts` 和运动 `src/CrewletFigure.css`，组件将导入该组件。

### CrewletCharacter

`CrewletCharacter` 绘制代理可以绘制的30个船员角色之一，以当前文本颜色绘制：

```tsx
import { CrewletCharacter, CREWLET_CHARACTERS, isCrewletCharacter } from '@crewlethq/icons/characters';

<CrewletCharacter character="hexlet" style={{ fontSize: 64, color: 'var(--color-node-cyan)' }} />
```

| 道具 | 类型 | 默认的 | 目的 |
| --- | --- | --- | --- |
| `character` | `CrewletCharacterId`，其中之一 `CREWLET_CHARACTERS` | 要求 | 画哪个角色。 `crewlet`首先，是标记本身。 |
| `detail` | `'full' | 'compact'` | `'full'` | `full` 绘制漂浮在车身上的键线和遮阳板周围的间隙； `compact` 把两个字都去掉，其他的字都剪得和它们一样细（书页的折痕），然后打开眼睛，看一个小到发际线的字。 |

每一个字都是按照标记自己的规则切割的：每个角都以45度角倒角，在标记自己的比例上有一条键线，遮阳板上有两条垂直的缝，从遮阳板本身开始测量，在平坦的冠上有一个V形缺口，在平坦的底座下有块腿。

一个角色的光学中心是正方形的：边界框的中间点和轮廓区域中心的中间点，在最小的圆形正方形中，这个点包含了它所画的一切，包括关键线的斜角。对称的轮廓几何居中；瘦弱的腿上有一颗心，尾巴上有一个演讲泡泡，顶端上有一个三角形，它们的运动方向都是向着自己的质量移动一半，所以它位于任何给定的盒子的中间。

它的脸和洞都被切割成自己的路径，绕在周围的轮廓上，从来没有涂过漆或掩盖过。一个cut会以各种颜色和主题显示角色所处的位置（徽章盘、图表卡、悬停行），宿主样式表对其区域内的路径所做的任何操作都无法填充一个cut。它不带掩码和id，所以任意数量的副本，无论一起呈现还是分开呈现，都可以共享一个页面。

id是配置存储的内容，所以集合是一个契约： `CREWLET_CHARACTERS` 按选择器提供的顺序列出id， `CREWLET_CHARACTER_GEOMETRY` 给每一个名字和几个字的形状，和 `isCrewletCharacter` 告诉这个构建从从线路读取的任何其他内容中提取的id。几何存在于 `src/crewletCharacters.ts`工会和削减开支 `src/region.ts` 还有镜框和脸 `src/characterDrawing.ts`;原来的克鲁莱特是从 `svg/crewlet-icon.svg` 本身,这 `test/characters.test.mjs` 成立。 `@crewlethq/ui`的 `Avatar` 以代理的色调在盘子上绘制一个字符。

## 样式表

两个组件携带规则，并且每个组件导入自己的样式表作为副作用，因此打包器在JavaScript旁边发出CSS，而消费者无需被告知即可获得它。这里没有什么取决于 `@crewlethq/tokens`：一个想要一个令牌的规则读取它的文字值作为回退。

因此，在没有捆绑器的情况下，在普通Node中加载构建的条目会在样式表导入时失败。这是同一份合同 `@crewlethq/ui` 有。

## 添加插图

1.  下降 `<your-icon>.svg` 成 `svg/`． 文件名变成PascalCase组件名(例如， `agent-celebrating.svg` 变成了 `AgentCelebrating`）。
2.  运行 `npm run build`.
3.  导出的新插图 `@crewlethq/icons` 并出现在 `ICON_NAMES`.

一个供应商的标志进入 `svg/vendor/` 相反，和被添加到 `VENDORS` 列表和 `Vendor` 联盟 `src/VendorMark.tsx`． 象形文字是出售的，而不是画出来的；看到 [`glyphs/README.md`](https://npmcn.com/package/%40crewlethq/icons/glyphs/README.md).

## 源svg的约定

在这个包中有四个家庭并存：

**品牌的艺术品**： `crewlet-icon` （克鲁莱特标志）和 `crewlet-reading` （一幅全彩插图，画的是克鲁莱特在看报纸），还有 `CrewletFigure`． 在自己的viewBox上填充艺术品；按提供的方式渲染它。 `crewlet-reading` 是一个大而详细的插图（大约670 KB的SVG），所以将其保留给英雄和空状态界面，而不是内联图标槽。Crewlet的名称、标志和字符是MIT许可证不包括的商标；看到 [TRADEMARKS.md](https://npmcn.com/package/%40crewlethq/icons/TRADEMARKS.md) 在官方Crewlet产品之外使用之前。

**功能说明** (80 x80): `hierarchy`， `company-as-code`， `turn-engine`， `code-sandbox`， `knowledge` 和 `human-in-loop`． 平台提供的每个功能都有一个，因此来自README、营销站点或文档的读者达到了相同的六个标记。独立的艺术作品，有自己的渐变和背景光盘，所以它不继承 `currentColor`． 构建前缀为every `id` 在同名的文件中，因为内联svg共享页的id空间；保持渐变和其他 `id` 定义它们的文件中的引用。

其中一个的梯度 **必须** 声明 `gradientUnits="userSpaceOnUse"` 横跨80x80的画布。留给SVG默认值， `objectBoundingBox`，从每个用它绘制的形状的方框中测量梯度，并且水平或垂直笔画有一个没有面积的方框：梯度退化并且形状根本不绘制。这组中有几笔就是这样，失败是无声的，所以 `test/gradients.test.mjs` 中每个文件的规则 `svg/`． 它停在 `svg/vendor/`，其中渐变是供应商自己的，并重新绘制它将重新绘制别人的标志；相反，这些标记所坚持的是失败，没有轴线对齐的形状从盒测量的梯度中绘制。

这些文件中的渐变停止以a表示它们的颜色 `style` 属性，因为绘制的是图形。通过React组件呈现，它是一个 `style` prop， React通过CSSOM和 `style-src` 不受控制，作为图像引用的SVG无论如何都是页面策略之外的自己的文档。将一个原始文件内联到一个带有严格定义的页面中 `style-src` 是丢失颜色的情况，因此内联组件而不是文件。

**签名的插图** （32x32）：不同情境下的乘员“agent”角色(`agent-idle`， `agent-working`， `agent-thinking`， `agent-reading`， `agent-greeting`， `agent-success`， `agent-error` 和 `agent-loading`）. 这个场景看起来就像一个角色，通过共享的线条风格和比例，而不是相同的轮廓：当这个姿势需要给道具（一本书、一张桌子、一个思想泡泡）留出空间时，头部和肩膀会移动、收缩或让位给躯干。命名新的变体 `agent-<pose>.svg`.

签名插图遵循以下规则，因此它们从CSS重新上色，并保持一个视觉权重：

-   一、 `0 0 32 32` viewBox。
-   `stroke="currentColor"` 和 `fill="none"`.
-   单1.6冲程重量。
-   `stroke-linecap="round"` 和 `stroke-linejoin="round"`.
-   没有硬编码的宽度或高度属性（构建剥离它们）。

**供应商是** （`svg/vendor/`)：每个应用程序在自己的viewBox上以自己的颜色绘制。根元素声明它想要的填充，因为构建只提供填充 `currentColor` 其中源声明none。

## 0.5.0的突破性变化

**象形文字是Lucide的笔画，而物质符号集已经消失了。** 经过批准的设计将每个字形绘制为24个网格上的一个笔画，其中一个网格旁边的填充材料符号读取为另一组的标记，因此 `@crewlethq/icons/glyphs` 现在在Lucide的名下有Lucide的画。每一个象形文字都改变了画法，而且大多数都改变了名字。这个 `symbols/` 树,其 `@crewlethq/icons/symbols/*` 出口和 `scripts/vendor-symbols.mjs` 删除;图纸已经出来了 `glyphs/`，出口为 `@crewlethq/icons/glyphs/*`． 包的许可证是 `MIT AND ISC` 而不是 `MIT AND Apache-2.0`，而应用程序的第三方通知为符号携带的通知是 `@crewlethq/icons/glyphs/LICENSE` 而不是 `@crewlethq/icons/symbols/LICENSE` 和 `NOTICE`.

光学尺寸轴与材质相关：Lucide绘图是每种尺寸的一个绘图，所以 `opsz` 选择它的两个函数被移除了。填充状态是一个道具，而不是第二个象形文字，并且只有在可以携带一个的象形文字上：物质的 `check_circle-fill`， `error-fill`， `info-fill` 和 `warning-fill` 它们是被去掉了标记的实心圆盘和三角形，这是笔画所不能做到的，所以它们是轮廓，而它们周围的色调就像它已经做过的那样带着状态。

**一个名称保留了不同的含义，这不是编译错误**，所以要寻找它： `FullscreenGlyph` 是Lucide `fullscreen`，里面有一个屏幕的角落，接替Material的 `fit_screen`，以及材料的 `fullscreen`光秃秃的角落，就是现在 `MaximizeGlyph`. `TagGlyph` 消失了，而不是重新利用：材料的 `tag` 是一个hash符号，是什么 `HashGlyph`和露西德自己的 `tag` 是一个价格标签，在旧的名称下会画一个不同的东西，而不需要一个字。

| 是 | 是 |
| --- | --- |
| 通过其材质名称导入的字形 | Lucide的继承者，见下表 |
| `opsz={20}` 或者 `opsz={24}` 在一个字形上 | 没什么，把道具拿掉 |
| `glyphOpticalSize()`， `glyphPixels()`, `GlyphOpticalSize` 和 `GlyphDrawing` 类型 | 没有什么; `cssLength()` 还说明了尺寸的长度 |
| `<StarFillGlyph />` | `<StarGlyph filled />` |
| `fill="currentColor"` 或者 `fill` 在样式表中固化字形 | `filled` 在一个 `FILLABLE` 字形;一个样式表 `fill` 绘制笔画的内部，因此将其从任何到达a的规则中删除 `.crewlet-glyph` |
| 样式表或 `strokeWidth` 改变字形的重量 | `--crewlet-glyph-stroke` 关于祖先 |
| `@crewlethq/icons/symbols/20/<name>.svg` 或者 `/24/<name>.svg` | `@crewlethq/icons/glyphs/<lucide-name>.svg` |
| `@crewlethq/icons/symbols/LICENSE` 和 `NOTICE` 在您的第三方通知中 | `@crewlethq/icons/glyphs/LICENSE` |
| 许可证扫描 `MIT AND Apache-2.0` | `MIT AND ISC` |
| `glyphByName('close')` 和其他材料名称在a `GlyphName` | Lucide名称，请参见下表 |

每一个物质符号命名的包裹，运送，它的后继。一行的Lucide名称也是 `GlyphName` 用于 `glyphByName`.

| 材料符号名称 | 是 | Lucide名字 | 是 |
| --- | --- | --- | --- |
| `account_tree` | `AccountTreeGlyph` | `network` | `NetworkGlyph` |
| `add` | `AddGlyph` | `plus` | `PlusGlyph` |
| `apartment` | `ApartmentGlyph` | `building-complex` | `BuildingComplexGlyph` |
| `arrow_downward` | `ArrowDownwardGlyph` | `arrow-down` | `ArrowDownGlyph` |
| `arrow_forward` | `ArrowForwardGlyph` | `arrow-right` | `ArrowRightGlyph` |
| `arrow_outward` | `ArrowOutwardGlyph` | `arrow-up-right` | `ArrowUpRightGlyph` |
| `arrow_upward` | `ArrowUpwardGlyph` | `arrow-up` | `ArrowUpGlyph` |
| `autorenew` | `AutorenewGlyph` | `refresh-cw` | `RefreshCwGlyph` |
| `block` | `BlockGlyph` | `ban` | `BanGlyph` |
| `bolt` | `BoltGlyph` | `zap` | `ZapGlyph` |
| `book_2` | `Book2Glyph` | `book-open` | `BookOpenGlyph` |
| `bug_report` | `BugReportGlyph` | `bug` | `BugGlyph` |
| `build` | `BuildGlyph` | `wrench` | `WrenchGlyph` |
| `cable` | `CableGlyph` | `plug` | `PlugGlyph` |
| `cached` | `CachedGlyph` | `refresh-ccw` | `RefreshCcwGlyph` |
| `calendar_clock` | `CalendarClockGlyph` | `calendar-clock` | `CalendarClockGlyph` |
| `calendar_today` | `CalendarTodayGlyph` | `calendar` | `CalendarGlyph` |
| `chat` | `ChatGlyph` | `message-square` | `MessageSquareGlyph` |
| `check` | `CheckGlyph` | `check` | `CheckGlyph` |
| `check_circle` | `CheckCircleGlyph` | `circle-check` | `CircleCheckGlyph` |
| `check_circle-fill` | `CheckCircleFillGlyph` | `circle-check` | `CircleCheckGlyph` |
| `chevron_left` | `ChevronLeftGlyph` | `chevron-left` | `ChevronLeftGlyph` |
| `chevron_right` | `ChevronRightGlyph` | `chevron-right` | `ChevronRightGlyph` |
| `close` | `CloseGlyph` | `x` | `XGlyph` |
| `code` | `CodeGlyph` | `code` | `CodeGlyph` |
| `computer` | `ComputerGlyph` | `monitor` | `MonitorGlyph` |
| `content_copy` | `ContentCopyGlyph` | `copy` | `CopyGlyph` |
| `create_new_folder` | `CreateNewFolderGlyph` | `folder-plus` | `FolderPlusGlyph` |
| `crown` | `CrownGlyph` | `crown` | `CrownGlyph` |
| `cycle` | `CycleGlyph` | `repeat-2` | `Repeat2Glyph` |
| `dark_mode` | `DarkModeGlyph` | `moon` | `MoonGlyph` |
| `dashboard` | `DashboardGlyph` | `layout-dashboard` | `LayoutDashboardGlyph` |
| `database` | `DatabaseGlyph` | `database` | `DatabaseGlyph` |
| `delete` | `DeleteGlyph` | `trash` | `TrashGlyph` |
| `description` | `DescriptionGlyph` | `file-text` | `FileTextGlyph` |
| `difference` | `DifferenceGlyph` | `diff` | `DiffGlyph` |
| `dns` | `DnsGlyph` | `server` | `ServerGlyph` |
| `drag_indicator` | `DragIndicatorGlyph` | `grip-vertical` | `GripVerticalGlyph` |
| `edit` | `EditGlyph` | `pencil` | `PencilGlyph` |
| `error` | `ErrorGlyph` | `circle-alert` | `CircleAlertGlyph` |
| `error-fill` | `ErrorFillGlyph` | `circle-alert` | `CircleAlertGlyph` |
| `explore` | `ExploreGlyph` | `compass` | `CompassGlyph` |
| `fit_screen` | `FitScreenGlyph` | `fullscreen` | `FullscreenGlyph` |
| `flag` | `FlagGlyph` | `flag` | `FlagGlyph` |
| `folder` | `FolderGlyph` | `folder` | `FolderGlyph` |
| `fork_right` | `ForkRightGlyph` | `split` | `SplitGlyph` |
| `fullscreen` | `FullscreenGlyph` | `maximize` | `MaximizeGlyph` |
| `fullscreen_exit` | `FullscreenExitGlyph` | `minimize` | `MinimizeGlyph` |
| `group` | `GroupGlyph` | `users` | `UsersGlyph` |
| `help` | `HelpGlyph` | `circle-question-mark` | `CircleQuestionMarkGlyph` |
| `inbox` | `InboxGlyph` | `inbox` | `InboxGlyph` |
| `info` | `InfoGlyph` | `info` | `InfoGlyph` |
| `info-fill` | `InfoFillGlyph` | `info` | `InfoGlyph` |
| `key` | `KeyGlyph` | `key` | `KeyGlyph` |
| `keyboard_arrow_down` | `KeyboardArrowDownGlyph` | `chevron-down` | `ChevronDownGlyph` |
| `keyboard_arrow_up` | `KeyboardArrowUpGlyph` | `chevron-up` | `ChevronUpGlyph` |
| `keyboard_double_arrow_left` | `KeyboardDoubleArrowLeftGlyph` | `chevrons-left` | `ChevronsLeftGlyph` |
| `keyboard_double_arrow_right` | `KeyboardDoubleArrowRightGlyph` | `chevrons-right` | `ChevronsRightGlyph` |
| `layers` | `LayersGlyph` | `layers` | `LayersGlyph` |
| `light_mode` | `LightModeGlyph` | `sun` | `SunGlyph` |
| `link` | `LinkGlyph` | `link` | `LinkGlyph` |
| `list` | `ListGlyph` | `list` | `ListGlyph` |
| `manufacturing` | `ManufacturingGlyph` | `cog` | `CogGlyph` |
| `memory` | `MemoryGlyph` | `cpu` | `CpuGlyph` |
| `menu` | `MenuGlyph` | `menu` | `MenuGlyph` |
| `more_vert` | `MoreVertGlyph` | `ellipsis-vertical` | `EllipsisVerticalGlyph` |
| `move_item` | `MoveItemGlyph` | `folder-input` | `FolderInputGlyph` |
| `neurology` | `NeurologyGlyph` | `brain` | `BrainGlyph` |
| `notifications` | `NotificationsGlyph` | `bell` | `BellGlyph` |
| `open_in_new` | `OpenInNewGlyph` | `external-link` | `ExternalLinkGlyph` |
| `package_2` | `Package2Glyph` | `package` | `PackageGlyph` |
| `pause` | `PauseGlyph` | `pause` | `PauseGlyph` |
| `person` | `PersonGlyph` | `user` | `UserGlyph` |
| `person_add` | `PersonAddGlyph` | `user-plus` | `UserPlusGlyph` |
| `photo_camera` | `PhotoCameraGlyph` | `camera` | `CameraGlyph` |
| `power_settings_new` | `PowerSettingsNewGlyph` | `power` | `PowerGlyph` |
| `redo` | `RedoGlyph` | `redo` | `RedoGlyph` |
| `refresh` | `RefreshGlyph` | `rotate-cw` | `RotateCwGlyph` |
| `remove` | `RemoveGlyph` | `minus` | `MinusGlyph` |
| `save` | `SaveGlyph` | `save` | `SaveGlyph` |
| `schedule` | `ScheduleGlyph` | `clock` | `ClockGlyph` |
| `search` | `SearchGlyph` | `search` | `SearchGlyph` |
| `settings` | `SettingsGlyph` | `settings` | `SettingsGlyph` |
| `settings_backup_restore` | `SettingsBackupRestoreGlyph` | `rotate-ccw` | `RotateCcwGlyph` |
| `shield` | `ShieldGlyph` | `shield` | `ShieldGlyph` |
| `shield_person` | `ShieldPersonGlyph` | `shield-user` | `ShieldUserGlyph` |
| `smart_toy` | `SmartToyGlyph` | `bot` | `BotGlyph` |
| `star` | `StarGlyph` | `star` | `StarGlyph` |
| `star-fill` | `StarFillGlyph` | `star` | `<StarGlyph filled />` |
| `swap_vert` | `SwapVertGlyph` | `arrow-up-down` | `ArrowUpDownGlyph` |
| `tag` | `TagGlyph` | `hash` | `HashGlyph` |
| `target` | `TargetGlyph` | `target` | `TargetGlyph` |
| `terminal` | `TerminalGlyph` | `square-terminal` | `SquareTerminalGlyph` |
| `timeline` | `TimelineGlyph` | `chart-no-axes-gantt` | `ChartNoAxesGanttGlyph` |
| `token` | `TokenGlyph` | `coins` | `CoinsGlyph` |
| `tune` | `TuneGlyph` | `sliders-vertical` | `SlidersVerticalGlyph` |
| `undo` | `UndoGlyph` | `undo` | `UndoGlyph` |
| `unfold_more` | `UnfoldMoreGlyph` | `chevrons-up-down` | `ChevronsUpDownGlyph` |
| `view_column` | `ViewColumnGlyph` | `columns-3` | `Columns3Glyph` |
| `visibility` | `VisibilityGlyph` | `eye` | `EyeGlyph` |
| `visibility_off` | `VisibilityOffGlyph` | `eye-off` | `EyeOffGlyph` |
| `warning` | `WarningGlyph` | `triangle-alert` | `TriangleAlertGlyph` |
| `warning-fill` | `WarningFillGlyph` | `triangle-alert` | `TriangleAlertGlyph` |
| `zoom_in` | `ZoomInGlyph` | `zoom-in` | `ZoomInGlyph` |
| `zoom_out` | `ZoomOutGlyph` | `zoom-out` | `ZoomOutGlyph` |

## 许可证

麻省理工学院和isc。

软件包本身的代码和图像是MIT；license文本已输入 [`LICENSE`](https://npmcn.com/package/%40crewlethq/icons/LICENSE)，它在包裹中发货。卖主的Lucide图纸 `glyphs/` 都在ISC许可下，那些Lucide从Feather衍生出来的也在Feather的MIT许可下；上游的 [`glyphs/LICENSE`](https://npmcn.com/package/%40crewlethq/icons/glyphs/LICENSE) 同时携带文本和船只。

这两个许可证都只涉及版权。Crewlet的名称，标志和字符是商标，所以是第三方的标志 `svg/vendor/`. [`TRADEMARKS.md`](https://npmcn.com/package/%40crewlethq/icons/TRADEMARKS.md)该公司也在包装中发货，说明了每种药物的使用方法。

## 常见问题

### @crewlethq/icons 是什么？

Crewlet签名插图图标、供应商标志和Lucide字形设置为React组件。

### 如何安装 @crewlethq/icons？

在项目目录运行 npm install @crewlethq/icons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @crewlethq/icons 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @crewlethq/icons 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @crewlethq/icons 可以商用吗？

@crewlethq/icons 使用 MIT AND ISC 许可。声明的许可为 MIT AND ISC，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @crewlethq/icons 还在维护吗？

最新版本 0\.84\.2 发布于 2026/11/01（2 天前）；至今共发布 129 个版本，其中过去 12 个月发布了 129 个；首次发布于 2026/09/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。