# @carbon/pictograms-react 中文文档

规范地址：https://npmcn.com/package/%40carbon/pictograms-react/

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

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

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

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

- 包体积（解压后）：19.6 MB，6348 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react \>=16
- 首次发布：2019-09-25T23:19:55.638Z
- 最新版本发布：2026-11-04T14:12:48.164Z
- 近 30 天下载量：148603（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：314（近 12 个月 54 个）

## 中文简介

利用碳设计系统对数字和软件产品中的象形图进行反应

## 安装

```sh
npm install @carbon/pictograms-react
```

也可以使用：`pnpm add @carbon/pictograms-react`、`yarn add @carbon/pictograms-react`、`bun add @carbon/pictograms-react`

## README

# @ 碳/相图反应

> 在数字产品和软件产品中使用 碳设计系统

## 开始

要安装 `@carbon/pictograms-react` 在您的项目中,您需要运行 根据命令使用 [无](https://www.npmjs.com/)数字 :

```bash
npm install -S @carbon/pictograms-react
```

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

```bash
yarn add @carbon/pictograms-react
```

## 使用量

您可以在您的工程中导入象形图组件, 使用它的名称 :

```jsx
import { Airplane } from '@carbon/pictograms-react';
```

我们还提供通用JS和UMD文件 `lib` 财务报告和审定财务报表 `umd` 目录, 页:1.

要使用 CommunityJS 导入, 您可以做以下操作:

```js
const { Airplane } = require('@carbon/pictograms-react');
```

_注意: 如果您想要找到象形图的导入路径, 您可以 参考我们 [象形图库](https://www.carbondesignsystem.com/guidelines/pictograms/library)_

### 图标填充

所有来自库支持的图标都被样式为 `fill` 属性。 你们可以 更改图标的颜色, 在自定义类名中通过此设置 属性(首选),或以内线样式通过。 例如:

```css
// CSS custom class name to set the fill of the icon to `rebeccapurple`
svg.my-custom-class {
  fill: rebeccapurple;
}
```

```jsx
import { Airplane } from '@carbon/pictograms-react';

function MyComponent() {
  return (
    <button>
      <Airplane aria-label="Add" className="my-custom-class" />
    </button>
  );
}
```

### 重点和 `aria-label`

默认情况下,图标组件来自 `@carbon/pictograms-react` 被视为 装饰性内容. 这意味着,我们设置 `aria-hidden="true"` 除非确定 道具传递给组件.

如果您想让屏幕阅读器宣布图标, 您可以提供 `aria-label` 或者说 `aria-labelledby`。例如:

```jsx
import { Airplane } from '@carbon/pictograms-react';

function MyComponent() {
  return (
    <button>
      <Airplane aria-label="Add" />
    </button>
  );
}
```

这样做将增加适当的 `role` 页:1 `<svg>` 节点也.

如果你愿意的话 `<svg>` 要得到焦点,你需要通过在一个 `tabIndex` 数值。 例如:

```jsx
import { Airplane } from '@carbon/pictograms-react';

function MyComponent() {
  return <Airplane aria-label="Add" tabIndex="0" />;
}
```

包括 `tabIndex` 财务报告和审定财务报表 `aria-label` (或 `aria-labelledby`)将设置 相应 `tabindex` 说明 `<svg>` 并验证对老年人的支持 通过设置 Internet Explorer 11 等浏览器 `focusable` 改为 `true`。 。 。 .

## 捐款

我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 [贡献指南](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/pictograms-react 是什么？

利用碳设计系统对数字和软件产品中的象形图进行反应

### 如何安装 @carbon/pictograms-react？

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

### @carbon/pictograms-react 支持 TypeScript 吗？

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

### @carbon/pictograms-react 支持 ESM 还是 CommonJS？

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

### @carbon/pictograms-react 可以商用吗？

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

### @carbon/pictograms-react 的下载量有多少？

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

### @carbon/pictograms-react 还在维护吗？

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