# @d3levvv/strapi-react-icons-plugin 中文文档

规范地址：https://npmcn.com/package/%40d3levvv/strapi-react-icons-plugin/

版本：1\.0\.0
npm 元数据更新时间：2025-02-23T10:23:39.968Z
中文译文更新时间：2026-11-11T09:15:13.144Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：4.9 MB，19 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：@strapi/sdk-plugin ^5\.3\.0，@strapi/strapi ^5\.7\.0，react ^18\.3\.1，react-dom ^18\.3\.1，react-router-dom ^6\.28\.1，styled-components ^6\.1\.14
- 首次发布：2025-02-23T10:23:39.277Z
- 最新版本发布：2025-02-23T10:23:39.688Z
- 近 30 天下载量：2514（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

使用反应相册的图标拾取器

## 安装

```sh
npm install @d3levvv/strapi-react-icons-plugin
```

也可以使用：`pnpm add @d3levvv/strapi-react-icons-plugin`、`yarn add @d3levvv/strapi-react-icons-plugin`、`bun add @d3levvv/strapi-react-icons-plugin`

## README

# Strapi 插件反应相册

此分叉是基于 pardi v5 的此插件的升级版本, 新的 pardi/ dedesign- system 套件也有一些 UI 修改

用于 pandi 选择反应图标的插件 .

![grafik](https://user-images.githubusercontent.com/34894514/234541590-5146511b-82ad-471f-aaf9-8475c91fc894.png) ![react-icons](https://github.com/DanielPantle/strapi-plugin-react-icons/assets/34894514/895596d2-b0b8-4dc9-8129-bd5449dfee72) ![grafik](https://user-images.githubusercontent.com/34894514/234541742-0b257d6c-d38e-43ca-af83-bd6af1dcff9e.png)

## 安装

要安装此插件, 您需要在您的 Strapi 应用程序中添加国家防范机制依赖性 :

```sh
# Using Yarn
yarn add strapi-plugin-react-icons

# Or using NPM
npm install strapi-plugin-react-icons
```

然后,你需要建立你的管理面板:

```sh
# Using Yarn
yarn build

# Or using NPM
npm run build
```

### Strapi 插件配置文件

添加 `"react-icons": true,` 在您皮带插件文件中.

如果您没有此文件, 请创建文件 :

```
# in TypeScript: "/config/plugins.ts"
export default ({ env }) => ({ "react-icons": true, });

# in JavaScript: "/config/plugins.js"
module.exports = ({ env }) => ({ "react-icons": true, });
```

## 使用量

### 皮带用法

-   在设置页面上选择您喜欢的图标库 .
-   在内容类型中添加自定义字段的反应-icon.
-   按下搜索图标从任何选定的图标库中选择一个图标.

### 反应中的用法 / Next.js

创建以下图标组件以动态显示图标 :

显示代码

```
'use client';

import { DOMAttributes } from 'react';

export type IReactIcon = string;

import loadable from '@loadable/component';
import { IconType } from 'react-icons';

const iconComponents = {
  Ai: () => import('react-icons/ai'),
  Bs: () => import('react-icons/bs'),
  Bi: () => import('react-icons/bi'),
  Ci: () => import('react-icons/ci'),
  Di: () => import('react-icons/di'),
  Fi: () => import('react-icons/fi'),
  Fc: () => import('react-icons/fc'),
  Fa: () => import('react-icons/fa6'),
  Gi: () => import('react-icons/gi'),
  Go: () => import('react-icons/go'),
  Gr: () => import('react-icons/gr'),
  Hi: () => import('react-icons/hi2'),
  Im: () => import('react-icons/im'),
  Lia: () => import('react-icons/lia'),
  Io: () => import('react-icons/io5'),
  Lu: () => import('react-icons/lu'),
  Md: () => import('react-icons/md'),
  Pi: () => import('react-icons/pi'),
  Rx: () => import('react-icons/rx'),
  Ri: () => import('react-icons/ri'),
  Si: () => import('react-icons/si'),
  Sl: () => import('react-icons/sl'),
  Tb: () => import('react-icons/tb'),
  Tfi: () => import('react-icons/tfi'),
  Ti: () => import('react-icons/ti'),
  Vsc: () => import('react-icons/vsc'),
  Wi: () => import('react-icons/wi'),
  Cg: () => import('react-icons/cg'),
} as unknown as { [x: string]: () => Promise<{ [key: string]: IconType }> };

export interface IDynamicReactIcon extends DOMAttributes<SVGElement> {
  name: IReactIcon;
}

const DynamicReactIcon: React.FC<IDynamicReactIcon> = ({
  name,
  ...rest
}: IDynamicReactIcon) => {
  const lib = name.replace(/([a-z0-9])([A-Z])/g, '$1 $2').split(' ')[0];
  const iconComponent = iconComponents[lib];

  if (!iconComponent) return <></>;

  const DynamicIcon = loadable(iconComponent, {
    resolveComponent: (el) => el[name],
  }) as IconType;

  return <DynamicIcon {...rest} />;
};

export default DynamicReactIcon;
```

## 计划特点

-   [x] 自定义反应相册字段
-   [x] 自定义字段的选择模式
-   [x] 启用/禁用图标库的设置页面
-   [ ] 图标库的默认选择
-   [x] 在选择模式中搜索

## 贡献和发展

任何公关或问题

## 常见问题

### @d3levvv/strapi-react-icons-plugin 是什么？

使用反应相册的图标拾取器

### 如何安装 @d3levvv/strapi-react-icons-plugin？

在项目目录运行 npm install @d3levvv/strapi-react-icons-plugin，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@strapi/sdk-plugin（^5\.3\.0）、@strapi/strapi（^5\.7\.0）、react（^18\.3\.1）、react-dom（^18\.3\.1）、react-router-dom（^6\.28\.1）、styled-components（^6\.1\.14）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @d3levvv/strapi-react-icons-plugin 支持 TypeScript 吗？

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

### @d3levvv/strapi-react-icons-plugin 支持 ESM 还是 CommonJS？

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

### @d3levvv/strapi-react-icons-plugin 可以商用吗？

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

### @d3levvv/strapi-react-icons-plugin 的下载量有多少？

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

### @d3levvv/strapi-react-icons-plugin 还在维护吗？

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