# @digital-ai/dot-illustrations 中文文档

规范地址：https://npmcn.com/package/%40digital-ai/dot-illustrations/

版本：2\.0\.64
npm 元数据更新时间：2026-11-03T13:35:58.505Z
中文译文更新时间：2026-11-12T08:27:17.720Z
软件包许可：SEE LICENSE IN \<LICENSE\.md\>

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

原始 npm 页面：https://www.npmjs.com/package/%40digital-ai/dot-illustrations
原文对照：https://npmcn.com/package/%40digital-ai/dot-illustrations/?lang=original
项目主页：https://github.com/digital-ai/dot-illustrations/
源码仓库：https://github.com/digital-ai/dot-illustrations

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

- 包体积（解压后）：2.6 MB，279 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2024-03-12T17:38:16.172Z
- 最新版本发布：2026-11-03T13:35:58.127Z
- 近 30 天下载量：4777（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：94（近 12 个月 31 个）

## 中文简介

设计团队保存插图和Dev团队找到插图的中心位置.

## 安装

```sh
npm install @digital-ai/dot-illustrations
```

也可以使用：`pnpm add @digital-ai/dot-illustrations`、`yarn add @digital-ai/dot-illustrations`、`bun add @digital-ai/dot-illustrations`

## README

# 点与点

Digital.ai UX中央资产库——用于产品和文件的插图和集成标志.

📖 **[浏览演示 ~](https://digital-ai.github.io/dot-illustrations/demo/)**

* * *

## 目录

-   [资产类型](https://npmcn.com/package/%40digital-ai/dot-illustrations/#readme-asset-types)
-   [浏览演示](https://npmcn.com/package/%40digital-ai/dot-illustrations/#readme-browse-the-demo)
-   [使用插图](https://npmcn.com/package/%40digital-ai/dot-illustrations/#readme-using-illustrations)
-   [使用整合标志](https://npmcn.com/package/%40digital-ai/dot-illustrations/#readme-using-integration-logos)
-   [使用任务图标](https://npmcn.com/package/%40digital-ai/dot-illustrations/#readme-using-task-icons)
-   [添加新插图或集成标志](https://npmcn.com/package/%40digital-ai/dot-illustrations/#readme-adding-a-new-illustration-or-integration-logo)
-   [解决问题](https://npmcn.com/package/%40digital-ai/dot-illustrations/#readme-troubleshooting)

* * *

## 资产类型

| 类型 | 文件夹 | 主题 | 反应组件 |
| --- | --- | --- | --- |
| **说明** | `illustrations/light/` + 键 `illustrations/dark/` | 光+暗 | `DotIllustration` |
| **整合标志** | `integrations/` | 单( 无暗变体) | `DotIllustration` |
| **任务图标** | `tasks/` | 单( 无暗变体) | `DotIllustration` |

> **整合标志和任务图标 `DotIllustration`,不是单独的 图标组件** - 与说明部分相同的部分,仅以 单主题 SVG 代替轻/暗对. **任务图标** 属于新 (S-135988)-取自"点"的固定颜色管道/工作流程徽章图标 原子库( 图解节点) `27123-30795`). 节点的15个图标中有13个在 范围(2个作为AI类排除在外)。 SVG已经到位. 见 [`tasks/README.md`](https://npmcn.com/package/%40digital-ai/dot-illustrations/tasks/README.md) 身份认证.

* * *

## 浏览演示

**[https://digital-ai.github.io/dot-illustrations/demo/\* (中文(简体) )](https://digital-ai.github.io/dot-illustrations/demo/*)\* 联合国**

演示让你:

-   浏览 **73个插图** (全球和板子), **114个整合标志**,以及 **13个任务图标** (任务部分)
-   切换到 **说明**, (中文(简体) ), **一体化**,以及 **任务** 使用搜索栏旁的切换器
-   **搜索** 两节都有模糊的自动完成
-   过滤插图 **A-Z 类** (仅集成——114个标志受益于字母导航)
-   **单击任意一张牌** 打开带有复制准备的代码片段的详细模式
-   **恒星项目** 以便以你的喜好保存它们
-   **上传新插图或集成标志** 从浏览器( 见 [上传新](https://npmcn.com/package/%40digital-ai/dot-illustrations/docs/adding-assets.md#upload-new-in-the-demo)(中文(简体) )

* * *

## 使用插图

### 反应.. `DotIllustration` 通过 `dot-components`

```tsx
import { DotIllustration } from '@digital-ai/dot-components';

// Light (default)
<DotIllustration illustrationId="empty" />

// Dark
<DotIllustration illustrationId="done" theme="dark" />

// With tooltip
<DotIllustration illustrationId="features" tooltip="See all features" />
```

[满 `DotIllustration` ∗∗∗](https://digital-ai.github.io/dot-components/?path=/story/components-illustration--default)

### 标准 HTML

```html
<link rel="stylesheet" href="./index.css" />

<!-- Light theme -->
<span class="dot-illustration">
  <img class="done light" />
</span>

<!-- Dark theme -->
<span class="dot-illustration">
  <img class="done dark" />
</span>
```

总是设置清晰 `width` 财务报告和审定财务报表 `height` ——该图书馆没有内置的缩放默认值.

* * *

## 使用整合标志

### 反应.. `DotIllustration` 通过 `dot-components`

```tsx
import { DotIllustration } from '@digital-ai/dot-components';
import '@digital-ai/dot-illustrations/integrations/index.css';

<DotIllustration illustrationId="jenkins" className="dot-integration" ariaLabel="Jenkins" />
```

> **工作间:** `DotIllustration` 它不支持整合标志 拥有的。 它只装入根 `index.css` 并包入图像 `.dot-illustration`,但整合规则是 `.dot-integration img.<id>` 内 `integrations/index.css`。在您的应用程序中导入此文件一次并通过 `className="dot-integration"`,将类添加到包装上。 无 两者,图像都是空的.

### 标准 HTML

```html
<link rel="stylesheet" href="./integrations/index.css" />

<span class="dot-integration">
  <img class="jenkins" />
</span>
```

> 整合标志是: **仅一个主题** 他们没有暗色的变体.

* * *

## 使用任务图标

### 反应.. `DotIllustration` 通过 `dot-components`

```tsx
import { DotIllustration } from '@digital-ai/dot-components';

<DotIllustration illustrationId="task-manual" className="dot-task-icon" ariaLabel="Manual task" />
```

> **工作间:** `DotIllustration` 不支持任务图标。 这个 将图像包入 `.dot-illustration`但是任务规则是 `.dot-task-icon img.<id>`他们生活在根部 `index.css`,哪个 `dot-components` 已经装入,所以通过 `className="dot-task-icon"` 实值 够了。 没有它,图像就变成空的.

### 标准 HTML

```html
<link rel="stylesheet" href="./index.css" />

<span class="dot-task-icon">
  <img class="task-manual" />
</span>
```

> 任务图标是 **仅一个主题** ——固定颜色徽章,无深色变体.

> **状态 :** 任务段的船,有浏览/复制/装入UI的线条, 13个镜内图标ID, 以及他们的SVG都到位了 — 见 [`tasks/README.md`](https://npmcn.com/package/%40digital-ai/dot-illustrations/tasks/README.md)。仍然开放:将这些内容作为真实内容出版 `iconId`单位 `@digital-ai/dot-icons`。 。 。 .

* * *

## 添加新插图或集成标志

**设计师分步指南: [文档/附加资产](https://npmcn.com/package/%40digital-ai/dot-illustrations/docs/adding-assets.md)**。它涵盖了插图、集成标志和任务图标: Figma 导出、文件、文件 `illustrations.json` 线条、支票和合并后发生的情况.

简而言之,每笔资产均在 [`illustrations.json`](https://npmcn.com/package/%40digital-ai/dot-illustrations/illustrations.json),以及 `npm run build` 写入 `index.css`, (中文(简体) ), `integrations/index.css`,演示列表和 `demo/descriptions.json` 从它。 别用手来编辑.

1.  在新分支上, 添加 SVG 文件 :
    
    | 仁爱 | 文件 | 大小 |
    | --- | --- | --- |
    | 说明 | `illustrations/light/global/my-new-state.svg` 财务报告和审定财务报表 `illustrations/dark/global/my-new-state.svg` (使用时 `dashboards/` 用于仪表板插图) | 248×248 (磁盘 353×212) |
    | 整合标志 | `integrations/my-tool.svg` | 40×40 (韩语) |
    | 任务图标 | `tasks/my-task-icon.svg` | 40×40 (韩语) |
    
2.  添加一行到 `illustrations.json`,在其组的末尾(全球插图,仪表板插图,集成标志,然后是任务图标):
    
    ```json
    {"id":"my-new-state","kind":"illustration","category":"global","label":"My new state","description":"This is the my-new-state illustration."},
    {"id":"my-tool","kind":"integration","category":null,"label":"My tool","description":null},
    {"id":"my-task-icon","kind":"task","category":null,"label":"My task icon task","description":null},
    ```
    
    ID是带有连字符的小写. `label` 是演示文稿复制的代码使用的 aria 标签 . `category` 财务报告和审定财务报表 `description` 仅用于插图.
    
3.  运行构建(节点20或后期,不需要安装),测试和检查:
    
    ```bash
    npm run build
    npm test
    npm run check
    ```
    
4.  提交SVG, `illustrations.json` 而文件的构建已更改。 打开拉动请求并张贴到 [#点- 组件](https://app.slack.com/client/T02GN6UQX/C01GVS9T7GV) 在Slack审查.
    

**在演示中上传新内容** 进行第1步和第2步的交接,并在发送任何文件前检查每个文件和ID。 然后由审查员运行 `npm run build` 在它的分枝上,在合并之前推出。 它尚不能打开主机演示的拉出请求: `digital-ai` 该组织的OAuth App访问限制屏蔽了它的应用. 它的工作从当地 复制的演示与 `node demo/local-proxy.js`编辑 [指南](https://npmcn.com/package/%40digital-ai/dot-illustrations/docs/adding-assets.md#upload-new-in-the-demo) 有步骤.

* * *

## 解决问题

**最新 `dot-illustrations` 未接获 `dot-components`**

添加一个 `resolutions` 条目 `package.json`数字 :

```json
"resolutions": {
  "@digital-ai/dot-illustrations": "latest"
}
```

**未显示的集成图像**

确保CSS的集成进口: `<link rel="stylesheet" href="./integrations/index.css" />`在反应中,也通过 `className="dot-integration"` (见 [使用整合标志](https://npmcn.com/package/%40digital-ai/dot-illustrations/#readme-using-integration-logos)) (中文(简体) ). 图书馆使用 `content: url()` 打开 `<img>` 要素—— `<img>` 标记必须 **没有 `src` 属性** 班级必须准确匹配整合身份.

* * *

详情: [点设计系统-说明](https://zeroheight.com/4a9ac476a/p/86a804-illustrations)

## 常见问题

### @digital-ai/dot-illustrations 是什么？

设计团队保存插图和Dev团队找到插图的中心位置\.

### 如何安装 @digital-ai/dot-illustrations？

在项目目录运行 npm install @digital-ai/dot-illustrations，或使用 pnpm add / yarn add / bun add。

### @digital-ai/dot-illustrations 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/digital-ai\_\_dot-illustrations 是否存在。

### @digital-ai/dot-illustrations 可以商用吗？

@digital-ai/dot-illustrations 使用 SEE LICENSE IN \<LICENSE\.md\> 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @digital-ai/dot-illustrations 的下载量有多少？

根据 npm 官方下载统计，@digital-ai/dot-illustrations 在 2026/10/12 – 2026/11/10 这 30 天内被下载 4,777 次，日均约 159 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @digital-ai/dot-illustrations 还在维护吗？

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