# @fluentui/react-native-icons 中文文档

规范地址：https://npmcn.com/package/%40fluentui/react-native-icons/

版本：2\.0\.346
npm 元数据更新时间：2026-11-13T20:14:07.791Z
中文译文更新时间：2026-11-15T01:29:23.549Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：60.1 MB，482 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18\.2\.0 \<20\.0\.0，react-native \>=0\.73\.0，react-native-svg \>=12\.5\.0
- 首次发布：2023-03-30T16:57:52.388Z
- 最新版本发布：2026-11-13T20:14:07.566Z
- 近 30 天下载量：28335（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：128（近 12 个月 32 个）

## 中文简介

Fleent System Icons是微软公司收藏的熟悉,友好和现代的图标.

## 安装

```sh
npm install @fluentui/react-native-icons
```

也可以使用：`pnpm add @fluentui/react-native-icons`、`yarn add @fluentui/react-native-icons`、`bun add @fluentui/react-native-icons`

## README

# @fluentui/反应- native-icons

Fleent System Icons是微软公司收藏的熟悉,友好和现代的图标. 此软件包提供按键的原始组件 [`react-native-svg`](https://github.com/software-mansion/react-native-svg)。 。 。 .

## 安装

```sh
yarn add @fluentui/react-native-icons react-native-svg
```

软件包需要反应 `>=18.2.0 <20.0.0`原生状态 `>=0.73.0`,以及 `react-native-svg >=12.5.0`选择一个 `react-native-svg` 与您的 React 本地版本兼容的版本并遵循其 [安装指令](https://github.com/software-mansion/react-native-svg#installation),包括必要的本土设置. 用于博览会 `npx expo install react-native-svg` 以选择兼容的版本.

## 使用量

从包根导入图标名称 。 大多数家庭提供 `Filled` 财务报告和审定财务报表 `Regular` 样式; 选定的图标也提供 `Light` 或多颜色 `Color` 样式。 不是每个家庭都有各种风格或大小.

```tsx
import { View } from 'react-native';
import { AccessTimeFilled, AccessTime20Regular, AddCircleColor } from '@fluentui/react-native-icons';

export function IconExamples() {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <AccessTimeFilled primaryFill="#212121" />
      <AccessTimeFilled width={32} height={32} primaryFill="#0078d4" />
      <AccessTime20Regular primaryFill="#212121" title="Time" />
      <AddCircleColor title="Add" />
    </View>
  );
}
```

### 大小

可调整图标从名称中省略大小, 例如 `AccessTimeFilled`他们通常使用20个单元的艺术品和取景盒,这些艺术品和取景盒是: **24倒计时** 默认,不 `1em`设置 `width` 财务报告和审定财务报表 `height` 在不更改视图的情况下缩放它们.

大小 : `AccessTime20Regular` 或者说 `AccessTime24Filled`它们使用为尺寸设计的艺术品,并默认这些维度。 在固定大小的渲染时优先选择匹配大小的变体. 原有的非平面尺寸和非标准视图Boxes酌情保留.

生成图标道具扩展 `SvgProps` 从 `react-native-svg`启用 `width`, (中文(简体) ), `height`,并在必要时, `viewBox` 以覆盖几何。 这个 `size` 方便道具属于 `FluentSvg` 工具,而不是生成的图标道具类型.

### 颜色和造型

使用 `primaryFill` 用于主要单色颜色。 默认为 `currentColor`,所以SVG `color` 道具也可以提供该颜色 :

```tsx
<>
  <AccessTimeFilled primaryFill="#0078d4" />
  <AccessTimeFilled color="#0078d4" />
</>
```

`primaryFill` 优于原始数据 `fill` 道具 (英语). 通过 `fill` 单独不改变主图标颜色。 彩色图标和明确彩色的细节保留了被作者的填充和梯度,而不是被统一地重彩.

标准 `react-native-svg` 道具,包括: `style`,则支持。 此软件包不提供网络软件包的 CSS 类, Griffel 样式, 或 `bundleIcon` API (英语). 选择 `Filled` 或者说 `Regular` 用于切换艺术品的组件 `filled` prob不切换 SVG 变体.

### 无障碍

使用 `title` 要给一个有意义的图标一个可访问的名称。 它的地图是 `aria-label`,不作为 SVG 提供 `<title>` 键。 图标带有 `title`, (中文(简体) ), `aria-label`,或 `aria-labelledby` 被指派 `role="img"`; 未命名图标被标记 `aria-hidden`。 。 。 .

对于已经贴上标签的按钮或其他控件内的图标,请将图标不命名并放入控件上.

## 公用事业和自定义图标

这个 `@fluentui/react-native-icons/utils` 出入口出口 `FluentSvg`, (中文(简体) ), `useIconState`,以及 `wrapIcon`,加上 `FluentSvgProps` 财务报告和审定财务报表 `FluentIconsProps` 类型.

`FluentSvg` 应用与生成图标相同的颜色和无障碍行为。 无 `size`,默认为24乘以24的取景口和 `viewBox="0 0 20 20"`与 `size`,其默认宽度、高度和视图框均使用该大小。 明确 `width`, (中文(简体) ), `height`,以及 `viewBox` 价值观优先.

```tsx
import { Path } from 'react-native-svg';
import { FluentSvg } from '@fluentui/react-native-icons/utils';
import type { FluentIconsProps } from '@fluentui/react-native-icons/utils';

export function DiamondIcon(props: FluentIconsProps) {
  return (
    <FluentSvg size={20} {...props}>
      <Path d="M10 2 18 10 10 18 2 10Z" />
    </FluentSvg>
  );
}
```

这里的路径继承了根填充, 所以 `primaryFill` 工作时没有过路填充表达式。 当自定义的艺术品需要多颜色或其他 SVG 涂料行为时, 保留明确的填充.

`useIconState` 使颜色和无障碍道具正常化. `wrapIcon` 仍然可供兼容,但生成的图标不再使用. `useIconState`, (中文(简体) ), `wrapIcon`,则 `FluentIconsProps` 类型也仍然从软件包根导出.

## 软件包输出和代码生成

该一揽子方案在下列领域提供无害环境管理: `lib/` 和常见JS 中 `lib-cjs/`,带有 TypeScript 声明。 软件包导出选择适当的格式 。 使用公共根并 `/utils` 切入点而不是内部生成的块路径 .

这个 `convert:rnsvg` 步骤从准备中的 SVG 生成组件 `intermediate/`数字 :

-   每个图标 `FluentSvg` 直接使用一个推断的组件名称而不是生成 `displayName` 任务.
-   使用平方大小图标 `size`; 默认尺寸和相容视图框被省略.
-   简单的单色形状继承了根填充. 复杂的艺术品在需要时保留了明确的填料.
-   符合条件的可重塑和大小为20的组件生活在相同的块并共享路径数据字符串,没有额外的图标组件层. 当共享会增加代码大小时, 短路径会继续内置 .
-   桶的使用 `export *`;大小块再出口合用地块组件,以保留已存在的束缚.

图标仍被分组成块。 命名的导入和无副作用模块允许在所支持的地方进行树摇动,但应用程序中包含的代码取决于其捆绑器.

## 发展

使用寄存器的Yarn 4设置有Node.js 22或24. 从寄存器根 :

```sh
corepack enable
yarn install --immutable
```

若为 `packages/react-native-icons/intermediate/` 尚未先准备、生成和优化 SVG 输入 :

```sh
yarn nx run react-native-icons:copy
yarn nx run react-native-icons:optimize
yarn nx run react-native-icons:unfill
```

对于代码生成和仅基于无害环境管理的构建:

```sh
yarn nx run react-native-icons:convert:rnsvg
yarn nx run react-native-icons:build:esm
yarn nx run react-native-icons:test
yarn nx run react-native-icons:lint
```

`build:esm` 只运行 TypeScript; 它不会重生图标 。 套件采用TypeScript 7,目标为ES2022,并采用自动回放JSX变换(`react-jsx`) (中文(简体) ). `build:cjs` 单独发布普通JS,而完整 `build` 脚本刷新SVG输入并构建两种格式.

编辑源资产, `convert-rn.js`,或酌情手写公用事业。 不要手动编辑生成的文件 `src/icons/`, (中文(简体) ), `src/sizedIcons/`, (中文(简体) ), `src/index.tsx`, (中文(简体) ), `lib/`,或 `lib-cjs/`。 。 。 .

## 常见问题

### @fluentui/react-native-icons 是什么？

Fleent System Icons是微软公司收藏的熟悉,友好和现代的图标\.

### 如何安装 @fluentui/react-native-icons？

在项目目录运行 npm install @fluentui/react-native-icons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.2\.0 \<20\.0\.0）、react-native（\>=0\.73\.0）、react-native-svg（\>=12\.5\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fluentui/react-native-icons 支持 TypeScript 吗？

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

### @fluentui/react-native-icons 支持 ESM 还是 CommonJS？

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

### @fluentui/react-native-icons 可以商用吗？

@fluentui/react-native-icons 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fluentui/react-native-icons 的下载量有多少？

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

### @fluentui/react-native-icons 还在维护吗？

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