# @fluentui/react-icons-font-subsetting-webpack-plugin 中文文档

规范地址：https://npmcn.com/package/%40fluentui/react-icons-font-subsetting-webpack-plugin/

版本：2\.0\.346
npm 元数据更新时间：2026-11-13T20:02:42.911Z
中文译文更新时间：2026-11-15T02:23:12.446Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：32.4 kB，8 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=14\.5\.0
- 运行依赖：1 个
- peer 依赖：webpack \>=5\.0\.0，@rspack/core \>=2\.0\.0
- 首次发布：2022-05-16T21:56:18.119Z
- 最新版本发布：2026-11-13T20:02:42.695Z
- 近 30 天下载量：4901（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：155（近 12 个月 36 个）

## 中文简介

Webpack 插件,用于子集 @fluentui/react-icons使用的图标字体,这些图标是使用图标的.

## 安装

```sh
npm install @fluentui/react-icons-font-subsetting-webpack-plugin
```

也可以使用：`pnpm add @fluentui/react-icons-font-subsetting-webpack-plugin`、`yarn add @fluentui/react-icons-font-subsetting-webpack-plugin`、`bun add @fluentui/react-icons-font-subsetting-webpack-plugin`

## README

# @fluentui/ react-icons-font-subsetting-webpack-plugin (英语)

此软件包包括一个插件 `webpack@>=5.0.0` 财务报告和审定财务报表 `@rspack/core@>=2.0.0` 以子集图标字体文件 `@fluentui/react-icons` 当使用基于字体的图标执行时.

若为 `optimization.usedExports` 启用(默认情况下为 `production` 模式),此插件将子集字体文件,只包含您构建时实际使用的格言.

## 支持的导入模式

该插件支持以下导入模式: `@fluentui/react-icons`数字 :

### 1\. 使用 `fluentIconFont` 条件

```js
// Uses font implementation via resolve.conditionNames
import { AddRegular, DeleteFilled } from '@fluentui/react-icons';
```

### 2\. 使用原子弹从 `@fluentui/react-icons/fonts/*`

```js
// Direct atomic imports - no conditionNames required
import { AddRegular, AddFilled } from '@fluentui/react-icons/fonts/add';
import { DeleteRegular } from '@fluentui/react-icons/fonts/delete';
```

原子进口为使用少量图标的应用提供了更好的摇树和更快的建设时间.

### 3\. 使用无头原子从 `@fluentui/react-icons/headless/fonts/*`

```js
// Headless font atoms — no Griffel runtime.
// You MUST also import the headless font CSS so the @font-face declarations and
// font files enter the module graph (the headless atoms don't import them):
import '@fluentui/react-icons/headless/fonts/styles.css';
import { AddRegular, AddFilled } from '@fluentui/react-icons/headless/fonts/add';
```

该插件根据您实际使用的无头图标,子集了标准API所使用的相同的共享字体文件. 因为字体文件通过 `styles.css`,您的配置需要CSS加载器(例如. `css-loader`)所以说 `url(...)` 将引用解入网络包资产.

> **提示 :** 你不必用手书写无原子头进口品. 此插件的对齐 [`@fluentui/react-icons-atomic-webpack-loader`](https://npmcn.com/package/%40fluentui/react-icons-atomic-webpack-loader) 使用 `{ headless: true, iconVariant: 'fonts' }` ——它改写了平板桶进口(`import { AddFilled } from '@fluentui/react-icons'`)变为无头字体原子,然后由此插件分集。 您仍然导入 `@fluentui/react-icons/headless/fonts/styles.css` 你自己来.

该插件为原子加载器的查询- 意识 `moduleGranularity: 'icon'` 模式。 排队模块通过它们 在精确选定导出时, 无查询物理路径. 使用协调加载器/插件释放:两个包执行a 汇编一级 `v1` 选择者能力握手并失败构建 当支持缺失或不兼容时生成不正确的子集.

## 使用量

### 与 `fluentIconFont` 条件

```js
// webpack.config.js
const {
  default: FluentUIReactIconsFontSubsettingPlugin,
} = require('@fluentui/react-icons-font-subsetting-webpack-plugin');

module.exports = {
  module: {
    rules: [
      // Treat the font files as webpack assets
      {
        test: /\.(ttf|woff2?)$/,
        type: 'asset',
      },
    ],
  },
  resolve: {
    // Include 'fluentIconFont' to use the font implementation of the Fluent icons
    conditionNames: ['fluentIconFont', 'import'],
  },
  plugins: [
    // Include this plugin
    new FluentUIReactIconsFontSubsettingPlugin(),
  ],
};
```

### 原子导入( 不需要条件名称)

```js
// webpack.config.js
const {
  default: FluentUIReactIconsFontSubsettingPlugin,
} = require('@fluentui/react-icons-font-subsetting-webpack-plugin');

module.exports = {
  module: {
    rules: [
      // Treat the font files as webpack assets
      {
        test: /\.(ttf|woff2?)$/,
        type: 'asset',
      },
    ],
  },
  plugins: [
    // Include this plugin
    new FluentUIReactIconsFontSubsettingPlugin(),
  ],
};
```

### 用红包

插件是捆绑-不可知的,在rspack中工作不变——相同的配置适用:

```js
// rspack.config.js
const {
  default: FluentUIReactIconsFontSubsettingPlugin,
} = require('@fluentui/react-icons-font-subsetting-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ttf|woff2?)$/,
        type: 'asset',
      },
    ],
  },
  plugins: [new FluentUIReactIconsFontSubsettingPlugin()],
};
```

两只棕榈花特有说明:

-   对于无头导入模式,使用 `rspack.CssExtractRspackPlugin` 改为 `mini-css-extract-plugin`,与rspack不相容.
-   `webpack` 财务报告和审定财务报表 `@rspack/core` 被宣布为 **选项** 端点依赖性,所以只需要安装实际使用的捆绑器.

橡胶包 `>=2.0.0` 是因为子设定读取模块图,并且 `moduleGraph.getUsedExports()` 暴露在JS API的urspack 2.0.

在红外线上 `2.0.x` 有一个限制: `moduleGraph.getProvidedExports()` 仅仅降落在2.1.0, 它让插件子集图标通过一个 **名称空间导入** (单位:千美元)`import * as Icons from '@fluentui/react-icons/fonts/…'`) (中文(简体) ). 因为这些图标不可能是 确定, _每个_ 受影响的软件包中的字体是未设置的子集——而不仅仅是命名空间导入的 自己的模块——因为从软件包所剩入的入件中进行子设定会降低格来法的命名空间 导入实际使用。 发生这种情况时, 自动提醒软件包名称 。 命名进口—— 普通案件——不受影响,完全归集。 升级到 rspack `>=2.1.0` 完全覆盖.

## 选项

### `onDuplicateInstances`

`'warn' | 'error'`默认值 `'warn'`。 。 。 .

插件子集对一个已解决 `@fluentui/react-icons` 软件包实例。 当字体模块 从多个已安装副本解析 —— 虚拟存储中的对等依赖性变体将做到这一点 不存在任何版本冲突——释放出字体资产不能安全归属于一个连贯的来源.

插件在检查字体资产所有权之前检测多个参与副本, 全部离开 字体非子集, 使每个格莱弗仍然生成, 并用其中的路径警告 。 设定 `'error'` 失败 改为:

```js
new FluentUIReactIconsFontSubsettingPlugin({ onDuplicateInstances: 'error' });
```

要重新进行子调试, 复制件会与捆绑器一起折叠到一个实例中 `resolve.alias` 条目. 请注意,这也会将每份拷贝都绑在单一的React和Griffel实例上.

使用无害环境管理 `import` 和通用JS系统 `require()` 从同一安装中不计为两份. 它们的用过的导出是合并的,每个被排放的字体资产都是子集一次.

## 开发检查

运行 `yarn nx run react-icons-font-subsetting-webpack-plugin:test` 单位,类型, 和网络包装/软件包集成覆盖.

运行 `yarn nx run react-icons-font-subsetting-webpack-plugin:test:render` 联 合 国 本地化全/子集字体浏览器检查 。 它需要剧作家铬 (单位:千美元)`yarn playwright install chromium`并检查标准/无头渲染, LTR/RTL 上下文,以及桌面/移动取景口. 屏幕截图被写入到 `tmp/localized-font-render` 在寄存器根处.

## 常见问题

### @fluentui/react-icons-font-subsetting-webpack-plugin 是什么？

Webpack 插件,用于子集 @fluentui/react-icons使用的图标字体,这些图标是使用图标的\.

### 如何安装 @fluentui/react-icons-font-subsetting-webpack-plugin？

在项目目录运行 npm install @fluentui/react-icons-font-subsetting-webpack-plugin，或使用 pnpm add / yarn add / bun add。

### @fluentui/react-icons-font-subsetting-webpack-plugin 支持 TypeScript 吗？

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

### @fluentui/react-icons-font-subsetting-webpack-plugin 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @fluentui/react-icons-font-subsetting-webpack-plugin 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=14\.5\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @fluentui/react-icons-font-subsetting-webpack-plugin 可以商用吗？

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

### @fluentui/react-icons-font-subsetting-webpack-plugin 的下载量有多少？

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

### @fluentui/react-icons-font-subsetting-webpack-plugin 还在维护吗？

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