# @carbon/icons 中文文档

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

版本：11\.92\.0
npm 元数据更新时间：2026-11-04T14:17:56.147Z
中文译文更新时间：2026-11-09T02:39:52.431Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40carbon/icons
原文对照：https://npmcn.com/package/%40carbon/icons/?lang=original
项目主页：https://github.com/carbon-design-system/carbon#readme
源码仓库：https://github.com/carbon-design-system/carbon

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

- 包体积（解压后）：54.7 MB，25157 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- 首次发布：2018-08-30T17:49:15.660Z
- 最新版本发布：2026-11-04T14:17:55.673Z
- 近 30 天下载量：530199（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：414（近 12 个月 48 个）

## 中文简介

使用碳设计系统的数字和软件产品的图标

## 安装

```sh
npm install @carbon/icons
```

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

## README

# @ 碳/缩写

> 使用碳设计系统的数字和软件产品的图标

## 开始

要安装 `@carbon/icons` 在您的工程中, 您需要运行以下 命令使用 [无](https://www.npmjs.com/)数字 :

```bash
npm install -S @carbon/icons
```

如果你喜欢 [雅伦](https://yarnpkg.com/en/),使用以下命令 相反:

```bash
yarn add @carbon/icons
```

## 使用量

碳中的图标可直接从 `@carbon/icons` 用于香草 Java脚本. 本Repo中的第一当事方框架包可用于:

-   [反应](https://npmcn.com/package/%40carbon/icons-react)
-   [阴道](https://npmcn.com/package/%40carbon/icons-vue)

还为下列项目提供了其他生态系统包:

-   [丝绒](https://github.com/IBM/carbon-icons-svelte)

为了使用图标,也许应该提及我们 [图标库](https://carbon-elements.netlify.app/icons/examples/preview/) 要找到您想要使用的特定图标,请参考页面.

### 香草

一旦你找到一个图标 并且你想用在 Vanilla JavaScript, 您可以通过在 JavaScript 文件中写入以下内容来导入图标 :

```js
import IconName from '@carbon/icons/<module-type>/path-to-icon/size';
```

比如,如果我想导入16x16 [`add`](https://carbon-elements.netlify.app/icons/examples/preview/#16%2Fadd) 图标,我会写:

```js
import AddIcon from '@carbon/icons/es/add/16';
```

在这种情况下, `es` 用于ES2015模块(ESM),但也可以使用 `lib` 用于普通JS或 `umd` 用于UMD模块.

为了让屏幕看到这个 我们会利用我们的 [`icon-helpers`](https://npmcn.com/package/%40carbon/icon-helpers) 软件包。 这个软件包给我们两个选项 渲染我们的图标 : `toString` 财务报告和审定财务报表 `toSVG`。如果在模板中渲染,您可以 欲用前一义. 如果给DOM, `toSVG` 也许有帮助.

就我们而言,我们用 `toSVG` 在 DOM 为 16x16 创建节点 `add` 图标 :

```js
import { getAttributes, toSVG } from '@carbon/icon-helpers';
import addIcon from '@carbon/icons/es/add/16';

const addIconNode = toSVG({
  ...addIcon,
  attrs: getAttributes(addIcon.attrs),
});
```

### 铺设内道

库中的某些图标支持图标内部的替代填充,用于 实例 [`warning--filled`](https://carbon-elements.netlify.app/icons/examples/preview/#16%2Fwarning--filled) 支持内置样式 `!` 路径.

为了给内部路径作样式,您需要使用 CSS 瞄准 SVG 。 单位 常规,您可以通过写入以下内容来瞄准路径:

```css
svg [data-icon-path='inner-path'] {
  fill: blue;
  opacity: 1;
}
```

在上面的代码片段中,我们的目标是内路径属性 `[data-icon-path="inner-path"]`值 `fill` 将是自定义颜色 您想要为内在的道路。 我们还需要设置 `opacity` 改为 `1` 以便让这个内部路径在页面上可见.

### 参考文献

你可以查看我们图标的完整参考文献 [这里](https://carbon-elements.netlify.app/icons/examples/preview/) 这是 用于查找路径信息以导入图标.

## 捐款

我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 [贡献指南](https://npmcn.com/.github/CONTRIBUTING.md)!

## 许可证

凭 [Apache 2.0 许可证](https://npmcn.com/LICENSE)。 。 。 .

## ![IBM Telemetry](https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg) IBM 遥测

本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 [选择退出IBM遥测数据收集](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection)。 。 。 . 有关所收集数据的更多信息,请参见: [IBM 遥测文档](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics)。 。 。 .

## 常见问题

### @carbon/icons 是什么？

使用碳设计系统的数字和软件产品的图标

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

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

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

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

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

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

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

@carbon/icons 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @carbon/icons 的下载量有多少？

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

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

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