# @apify/ui-icons 中文文档

规范地址：https://npmcn.com/package/%40apify/ui-icons/

版本：1\.61\.0
npm 元数据更新时间：2026-11-05T14:02:03.887Z
中文译文更新时间：2026-11-06T10:05:57.300Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40apify/ui-icons
原文对照：https://npmcn.com/package/%40apify/ui-icons/?lang=original

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

- 包体积（解压后）：1.9 MB，2458 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react 17\.x \|\| 18\.x \|\| 19\.x，react-dom 17\.x \|\| 18\.x \|\| 19\.x
- 首次发布：2025-02-12T09:04:39.637Z
- 最新版本发布：2026-11-05T14:02:03.727Z
- 近 30 天下载量：8202（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：141（近 12 个月 101 个）

## 中文简介

作为反应组件的图标

## 安装

```sh
npm install @apify/ui-icons
```

也可以使用：`pnpm add @apify/ui-icons`、`yarn add @apify/ui-icons`、`bun add @apify/ui-icons`

## README

# `@apify/ui-icons`

浏览图标 [主机故事本](https://apify.github.io/apify-core/storybook-shared/?path=/docs/design-tokens-icons--docs)。 。 。 .

认证图标设定为 ~280 键入的 React 组件, 由 SVG 通过 [特别志愿人员](https://react-svgr.com/)。每个图标船带有 `viewBox` (因此,它比额),接受 `size` 道具和用途 `currentColor` 页:1 `fill` (因此它继承了文字颜色并尊重它们).

替换老年人 `@apify-packages/icons` 软件包——相同的导入形状,更广泛的图标集.

## 安装

```bash
pnpm add @apify/ui-icons
```

同伴依赖关系( 如果还没有在您的项目中安装的话) :

-   `react` 17.x; 18.x; 19.x; 19
-   `react-dom` 17.x; 18.x; 19.x; 19

没有 `styled-components` 要求 – 图标是平面 SVG React 组件.

## 快开始

```tsx
import { ChevronRightIcon, SettingsIcon } from '@apify/ui-icons';

export const SettingsLink = () => (
    <a href="/settings">
        <SettingsIcon size="16" title="Settings" />
        Settings
        <ChevronRightIcon size="12" />
    </a>
);
```

每个图标都接受:

-   `size?: string` ——像素大小作为字符串(`'12'`, (中文(简体) ), `'16'`, (中文(简体) ), `'24'`默认 `'24'`。 。 。 .
-   `title?: string` + 键 `titleId?: string` ——无障碍名. 纯装饰性图标的输出(消费者应添加 `aria-hidden`) (中文(简体) ).
-   `className?: string` ——传入 `<svg>` 键.

要重新显示图标,请设置 `color` ,其母体(如按钮或文本节点). SVG集团 `fill` 实值 `currentColor`。 。 。 .

## 里面的东西

-   **~280个图标** 覆盖导航( n)`ChevronRightIcon`, (中文(简体) ), `ArrowSortIcon`),状态(`CheckIcon`, (中文(简体) ), `MinusIcon`, (中文(简体) ), `AlertIcon`),表面(`SettingsIcon`, (中文(简体) ), `BellIcon`, (中文(简体) ), `BookmarkIcon`),并补充具体概念(例如:`ActorIcon`, (中文(简体) ), `DatasetIcon`) (中文(简体) ).
-   **类型** ——每个部分为a `FC<IconProps>` 与 `size`, (中文(简体) ), `title`, (中文(简体) ), `titleId`, (中文(简体) ), `className` 道具来.
-   **可主题** —— 说 `fill="currentColor"` 到处都是,所以颜色来自父母的CSS颜色.
-   **树能震动** ——每个图标是一个被命名的导出,捆绑者放下未使用过的.

浏览故事书中的完整目录(见下文).

## 故事书

从寄存器根 :

```bash
pnpm run storybook
```

该图标目录生活在共享的故事本中 [http://localhost:6007 (英语)](http://localhost:6007/) 在"Iconography"栏下.

## 捐款

见 [`CONTRIBUTING.md`](https://npmcn.com/package/%40apify/ui-icons/CONTRIBUTING.md) 用于添加新图标(SVGR工作流程),构建指令,以及无障碍说明.

## 常见问题

### @apify/ui-icons 是什么？

作为反应组件的图标

### 如何安装 @apify/ui-icons？

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

### @apify/ui-icons 支持 TypeScript 吗？

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

### @apify/ui-icons 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @apify/ui-icons 可以商用吗？

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

### @apify/ui-icons 的下载量有多少？

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

### @apify/ui-icons 还在维护吗？

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

