# @amsterdam/design-system-react-icons 中文文档

规范地址：https://npmcn.com/package/%40amsterdam/design-system-react-icons/

版本：2\.3\.0
npm 元数据更新时间：2026-10-22T13:57:39.601Z
中文译文更新时间：2026-11-06T01:38:20.581Z
软件包许可：SEE LICENSE IN LICENSE\.md

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

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

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

- 包体积（解压后）：568 kB，380 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react 16 - 19，react-dom 16 - 19
- 首次发布：2023-02-10T13:23:11.361Z
- 最新版本发布：2026-10-22T13:57:37.710Z
- 近 30 天下载量：14411（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：23（近 12 个月 4 个）

## 中文简介

阿姆斯特丹设计系统的所有图标作为反应组件. 用它来使用您 React 项目中的正确图标 .

## 安装

```sh
npm install @amsterdam/design-system-react-icons
```

也可以使用：`pnpm add @amsterdam/design-system-react-icons`、`yarn add @amsterdam/design-system-react-icons`、`bun add @amsterdam/design-system-react-icons`

## README

# 阿姆斯特丹设计系统:反应图标

此软件包提供了来自 [阿姆斯特丹设计系统](https://designsystem.amsterdam/) 作为反应组件. 用它来使用您 React 项目中的正确图标 .

## 安装

如果您想要或需要直接在反应项目中使用图标, 则自行安装此软件包 .

注意我们 [反应组件](https://www.npmjs.com/package/@amsterdam/design-system-react) 包含一个 [图标组件](https://designsystem.amsterdam/?path=/docs/components-media-icon--docs) 这为使用图标提供了方便的API,并简化了与文本的对齐.

```sh
npm install @amsterdam/design-system-react-icons
```

## 使用量

导入您需要的图标组件以及通用图标组件,并在您的 JSX 中使用 .

```tsx
import { Icon } from "@amsterdam/design-system-react"
import { SearchIcon } from "@amsterdam/design-system-react-icons"

export const App = () => <Icon svg={SearchIcon} />
```

## 从右到左的镜像

一些图标(箭头、车辆、语音气球等)带有 `data-directional="true"` 其根上的属性 `<svg>` 元素,并意在从右到左(RTL)上下文横向反射. 當您用相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相關相 `Icon` 组件,此镜像由 `@amsterdam/design-system-css`是因为 `.ams-icon` 样式.

如果您直接渲染图标组件, 而不将其包入 `Icon`你对照镜子负责. 添加一条按照这些线条的规则,范围为您创建图标的任何地方:

```css
.your-icon-wrapper:dir(rtl) svg[data-directional="true"] {
  transform: scaleX(-1);
}
```

应用 `:dir(rtl)` 对包装,而不是 `<svg>` 自己来. 方向性确定由每个文档语言定义, SVG 有自己的规则与 HTML 不同—— 应用 `:dir()` 直接对一个 `<svg>` 元素依赖于浏览器处理不一致的未指定跨名称空间继承行为.

见 [图标贡献指南](https://github.com/Amsterdam/design-system/blob/develop/packages-proprietary/assets/CONTRIBUTING.md#right-to-left-rtl-mirroring) 图标带有属性和原因.

## 更新

当更新到此软件包的新发布时, 请检查 [更改日志](https://github.com/Amsterdam/design-system/blob/develop/packages-proprietary/react-icons/CHANGELOG.md) 因为打破了变化. 如果有的话,请相应更新申请.

## 支助

如果你有问题,找到问题,或者想做贡献,请联系我们. 想办法联系我们 [设计系统.amsterdam](https://designsystem.amsterdam/?path=/docs/docs-introduction--docs#send-a-message)。 。 。 .

## 常见问题

### @amsterdam/design-system-react-icons 是什么？

阿姆斯特丹设计系统的所有图标作为反应组件\. 用它来使用您 React 项目中的正确图标 \.

### 如何安装 @amsterdam/design-system-react-icons？

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

### @amsterdam/design-system-react-icons 支持 TypeScript 吗？

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

### @amsterdam/design-system-react-icons 支持 ESM 还是 CommonJS？

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

### @amsterdam/design-system-react-icons 可以商用吗？

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

### @amsterdam/design-system-react-icons 的下载量有多少？

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

### @amsterdam/design-system-react-icons 还在维护吗？

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