# @ch-ui/vite-plugin-icons 中文文档

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

版本：1\.2\.0
npm 元数据更新时间：2026-04-10T07:04:59.758Z
中文译文更新时间：2026-11-09T09:10:11.350Z
软件包许可：Ch Public License

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

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

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

- 包体积（解压后）：60.2 kB，17 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.0\.0
- 运行依赖：3 个
- peer 依赖：vite 5\.x \|\| 6\.x
- 首次发布：2024-07-08T23:48:12.811Z
- 最新版本发布：2026-04-10T07:04:59.616Z
- 近 30 天下载量：6204（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 4 个）

## 中文简介

自动将图标图示捆绑的 Vite 插件 .

## 安装

```sh
npm install @ch-ui/vite-plugin-icons
```

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

## README

# `@ch-ui/vite-plugin-icons`

用于您项目中使用的类似 Tailwind 的 sprinting 图标的 Vite 插件 .

## 安装配置( S)

```shell
pnpm add -D @ch-ui/vite-plugin-icons
```

```ts
import IconsPlugin from '@ch-ui/vite-plugin-icons';
// ...
export default defineConfig((env) => ({
  // The plugin will put the sprite in the project’s `publicDir`
  publicDir: resolve(__dirname, '../dist/assets'),
  // ...
  plugins: [
    // ...
    IconsPlugin({
      // Define the regular expression for the symbols you intend to use for your project; the expression must capture any strings you need to determine the path to the SVG asset.
      symbolPattern:
        'ph-icon--([a-z]+[a-z-]*)--(bold|duotone|fill|light|regular|thin)',
      // The matches in your regular expression are spread onto `assetPath` which must return the path to the SVG file specified by the symbol.
      assetPath: (name, variant) =>
        `./packages/icons/node_modules/@phosphor-icons/core/assets/${variant}/${name}${
          variant === 'regular' ? '' : `-${variant}`
        }.svg`,
      // Tell the plugin how to name the sprite.
      spriteFile: 'sprite.svg',
      // Tell the plugin in which files to look for icon symbols.
      contentPaths: ['**/*.stories.tsx'],
    }),
    // ...
  ],
}));
// ...
```

## 用法实例

下面为 React 组件提供了示例, 但此插件将适用于您可能碰巧使用的任何文本内容 .

```tsx
import React, { ComponentPropsWithRef, forwardRef } from 'react';

const SPRITE = './assets/sprite.svg';

type IconName = string;
type IconVariant = 'bold' | 'duotone' | 'fill' | 'light' | 'regular' | 'thin';

type IconProps = ComponentPropsWithRef<'svg'> & {
  symbol: `ph-icon--${IconName}--${IconVariant}`;
};

const Icon = forwardRef<SVGSVGElement, IconProps>(
  ({ symbol, ...props }, forwardedRef) => {
    return (
      <svg viewBox="0 0 256 256" {...props} ref={forwardedRef}>
        <use href={`${SPRITE}#${symbol}`} />
      </svg>
    );
  },
);

export const ExampleIcons = () => {
  return (
    <>
      <style>{`
        svg{ inline-size: 4rem; block-size: 4rem; display: inline-block; margin:.25rem; color: blue }
      `}</style>
      <Icon symbol="ph-icon--address-book--regular" />
      <Icon symbol="ph-icon--planet--thin" />
      <Icon symbol="ph-icon--anchor--bold" />
      <Icon symbol="ph-icon--cards-three--light" />
      <Icon symbol="ph-icon--map-pin-simple-area--duotone" />
    </>
  );
};
```

## 常见问题

### @ch-ui/vite-plugin-icons 是什么？

自动将图标图示捆绑的 Vite 插件 \.

### 如何安装 @ch-ui/vite-plugin-icons？

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

### @ch-ui/vite-plugin-icons 支持 TypeScript 吗？

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

### @ch-ui/vite-plugin-icons 支持 ESM 还是 CommonJS？

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

### @ch-ui/vite-plugin-icons 需要什么版本的 Node\.js？

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

### @ch-ui/vite-plugin-icons 可以商用吗？

@ch-ui/vite-plugin-icons 使用 Ch Public License 许可。声明的许可为 Ch Public License，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @ch-ui/vite-plugin-icons 的下载量有多少？

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

### @ch-ui/vite-plugin-icons 还在维护吗？

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