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

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

版本：1\.1\.82
npm 元数据更新时间：2026-11-10T12:05:04.824Z
中文译文更新时间：2026-11-12T08:26:18.097Z
软件包许可：SEE LICENSE IN \<LICENSE\.md\>

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

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

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

- 包体积（解压后）：1.4 MB，10 个文件
- TypeScript 类型：未声明
- Node.js 要求：\>=20
- 运行依赖：0 个
- 首次发布：2023-02-24T17:15:14.634Z
- 最新版本发布：2026-11-10T12:05:04.604Z
- 近 30 天下载量：5832（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：78（近 12 个月 32 个）

## 中文简介

由 Digital.ai 使用的图标独立包

## 安装

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

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

## README

# 点角

Digital.ai UX 的图标字体存储器——单独使用或与 `dot-components`。 。 。 .

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

* * *

## 目录

-   [使用图标](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-using-icons)
-   [浏览演示](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-browse-the-demo)
-   [添加新图标](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-adding-a-new-icon)
    -   [字体是如何构建的](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-how-the-font-is-built)
    -   [添加或修改图标](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-adding-or-changing-an-icon)
    -   [在演示中上传新内容](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-upload-new-in-the-demo)
    -   [出口规则](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-export-rules)
-   [检查每个拉动请求](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-checks-on-every-pull-request)
-   [配置游戏](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-configuring-jest)
-   [解决问题](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-troubleshooting)

* * *

## 使用图标

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

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

<DotIcon iconId="home" />
<DotIcon iconId="settings" fontSize="large" tooltip="Settings" />
<DotIcon iconId="ai" ai={true} />
```

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

### 标准 HTML

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

<span class="dot-icon">
  <i class="icon-home"></i>
</span>
```

> **从不** 添加 `icon-` 前缀 `iconId` 道具 —— `DotIcon` 自动添加.

* * *

## 浏览演示

**[https://digital-ai.github.io/dot-icons/demo/\* 互联网档案馆的存檔,存档日期2013-12-02](https://digital-ai.github.io/dot-icons/demo/*)\* 联合国**

演示让你:

-   浏览每个图标, 分为12个类别( 导航、 动作、 状态、 布局、 DevOps、 文件与文件、 通讯、 安全、 人民、 AI、 Logos、 商业和杂项) 以及您的爱好
-   **搜索** 使用模糊的自动完成, 由 id 或 遗留名称 (`expander` 发现 `key`(中文(简体) )
-   **单击任意一张牌** 打开带有 Icon ID, Dot 代码的详细模式(`<DotIcon iconId="..." />`),和 HTML 代码 – 全部可复制
-   **恒星图标** 以保存在您最爱的标签上( 在浏览器中长期存在)
-   **上传新图标** 从浏览器 : _上传新_ 检查ID和SVG,然后用SVG及其 `icons.json` 线条。 在组织批准该演示的 GitHub 应用程序后运行的托管演示中;在此之前,在当地运行演示(参见 [在演示中上传新内容](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-upload-new-in-the-demo)(中文(简体) )

* * *

## 添加新图标

### 字体是如何构建的

Repo是图标字体的来源. IcoMoon不再被使用:不要导入或输出IcoMoon项目,也不要编辑 `selection.json` 手边.

-   `fonts/svg/<id>.svg`:每个图标一个SVG.
-   `icons.json`: 每个图标一行, 带有 `id`页:1 `code` (字体代码点),其演示 `category`,以及 `aliases` (同一格氏的后传类名,如: `expander` 页:1 `key`) (中文(简体) ).

`npm run build` 产生另外所有的东西 `fonts/dot.woff2`, (中文(简体) ), `dot.woff`, (中文(简体) ), `dot.ttf` 财务报告和审定财务报表 `dot.svg`, (中文(简体) ), `index.css`,演示的图标列表(`demo/icons.js`),以及 `selection.json`。同样的输入总是给出相同的字节。 不要用手编辑生成的文件:每次拉请求的检查都失败了.

`selection.json` 是一个IcoMoon计划,每个glyph, 写再发行一次,作为返回IcoMoon的方法。 后所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出.

### 添加或修改图标

**设计师分步指南: [文档/附加资产](https://npmcn.com/package/%40digital-ai/dot-icons/docs/adding-assets.md)**。它涵盖了新的图标,重绘,别名,命名规则,支票的信息以及合并后发生的事情.

简而言之:

1.  从 Figma 导出图标为跟随的 SVG [出口规则](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-export-rules)。 。 。 .
2.  在一个新的分支上,运行 `npm ci` 一次,然后添加图标及其文件、其编号和一个已存在的类别:
    
    ```bash
    npm run add-icon -- ~/Downloads/my-new-icon.svg my-new-icon actions
    ```
    
    Id是小写 kebab- case, 比如 `my-new-icon`。 。 。 . `add-icon` 检查SVG,复制到 `fonts/svg/<id>.svg`,将一行添加到 `icons.json` 下一条自由代码,并运行 `npm run build`它拒绝继续运行 `main`,不做任何承诺,不对文件进行修改.
3.  检查演示中图标 .
4.  提交 SVG, `icons.json` 并打开一个拉动请求。 何时 **检查图标** 通行证,贴入 [#点- 组件](https://app.slack.com/client/T02GN6UQX/C01GVS9T7GV) 在斯莱克.

要逐个添加图标, 请将 SVG 保存为 `fonts/svg/<id>.svg`,结尾处添加一行 `icons.json` 下一个自由代码和前面的逗号,然后运行 `npm run build`数字 :

```json
{"id":"my-new-icon","code":"ea3b","category":"actions","aliases":[]}
```

重画图标需要 `glyph-change` 标签在它的拉出请求。 ID从未被更名或去除;取而代之的是增加第二个名字作为别名.

### 在演示中上传新内容

没有克隆,请从 [演示](https://digital-ai.github.io/dot-icons/demo/)数字 : **连接 GitHub**,则 **上传新**,带有ID,一个类别和SVG文件.

-   格式检查 : 键入时的 ID( 小写为 kebab- case, 不由图标或后继名称所取) , 以及选中的文件 `.svg` 之后的 [出口规则](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-export-rules)) (中文(简体) ). 它列出每个问题,和 **创建拉请求** 禁用至无.
-   它打开一个拉取请求 与一个承诺: SVG 作为 `fonts/svg/<id>.svg` 和一行输入 `icons.json` 在下一个自由代码。 它不构建字体.
-   **在拉动请求合并之前,有人运行 `npm run build` 在它的树枝上,并推进结果.** 检查图标在那之前会保持红色;拉出请求说明如何显示.

这个 `digital-ai` 组织限制OAuth App访问,所以主机演示只能在Org所有者批准其应用后才能打开拉出请求. 在此之前,或者如果GitHub回答组织"已经启用了OAuth App访问限制",使用 `npm run add-icon`,或用自己的程序运行克隆演示文稿 `gh` 登录( n)`gh auth login`) (中文(简体) ). 在两个终端中, 从 repo 根 :

```bash
node demo/local-proxy.js
```

```bash
python3 -m http.server 5174
```

然后打开 `http://localhost:5174/demo/`。它通过代理单独连接.

### 出口规则

字体甘油有一色而无中风,所以 `add-icon`,上传New, `npm run build` 财务报告和审定财务报表 **检查图标** 以 :

-   中风、 嵌入式图像、 梯度、 文本、 透明度、 或除剪辑外的剪辑或口罩
-   多个填充颜色, 或者没有填充形状
-   一个不是正方形的视图框, 对于新图标: `add-icon`上传新和 **检查图标** 停下来,和 `npm run build` 因此,四个975宽的图标 从IcoMoon保持宽度
-   超过 200 KB, 或外部文件的链接

`fill-rule="evenodd"`Figma经常出口,只发出警告。 在Figma中:像24×24这样的正方形框架, _中图_ 财务报告和审定财务报表 _大纲_,则 _平缓_,每个形状一个填满。 每个信息及其固定: [文档/附加资产](https://npmcn.com/package/%40digital-ai/dot-icons/docs/adding-assets.md#export-the-icon-from-figma)。 。 。 .

* * *

## 检查每个拉动请求

这个 **检查图标** 工作流程重建出每个拉出请求,并与其基分站进行比较. 失败时 :

-   生成的文件与新文件不符 `npm run build`,例如手编辑到 `index.css` 或从 IcoMoon 导出复制的字体文件
-   类名 `index.css` 被删除,或者在不同的代码中指点,例如 `icon-forward-outline was moved from \ea3a to \ea3b`
-   一个格言入 `fonts/dot.ttf` 删除
-   一个字体的垂直度量变化, 它会移动每个图标
-   已存在的 glyph 变化形状: 它的大纲移动了 1 个以上的字体单位, 它的宽度或轮廓变化的次数, 或者轮廓风向相反
-   `icons.json` 打破一条规则:重复的 id,别名或代码,没有 SVG 或没有条目的 SVG 的条目,或代码不高于每一个早期代码的新图标,其id不是小写 kebab- case,或者其分类不存在
-   sVG 牵引请求添加或更改断开 [导出规则](https://npmcn.com/package/%40digital-ai/dot-icons/#readme-export-rules)。在运行摘要中显示警告,不要失败

新班名和新格莱弗斯传. 如果一个已有图标是故意重新绘制的,请添加 `glyph-change` 标签为拉出请求,检查会再次运行。 标签不允许去除,重新编号或度量变化:公布的图标从未被去除或重新编号.

如果生成的文件已过时, 请运行 `npm run build` 在树枝上,并承担它的变化.

要运行检查之前你推:

```bash
npm ci
npm run build
git worktree add ../dot-icons-main origin/main
npm run check -- --base ../dot-icons-main
npm test
```

* * *

## 配置游戏

`dot-icons` 用途 `@font-face` 它不能处理。 添加样式模拟 :

**`jest.config.js`**

```js
moduleNameMapper: {
  '@digital-ai/dot-icons': '<rootDir>/testing-utils/style-mock.ts',
}
```

**`testing-utils/style-mock.ts`**

```ts
module.exports = {};
```

* * *

## 解决问题

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

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

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

* * *

详情: [点设计系统——图标](https://zeroheight.com/4a9ac476a/p/13a447-icons)

## 常见问题

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

由 Digital\.ai 使用的图标独立包

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

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

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

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

### @digital-ai/dot-icons 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

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

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

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

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

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

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