# @arshiash80/strapi-plugin-iconhub 中文文档
规范地址：https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/
版本：1\.3\.1
npm 元数据更新时间：2026-04-19T12:22:48.726Z
中文译文更新时间：2026-11-06T22:14:18.945Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40arshiash80/strapi-plugin-iconhub
原文对照：https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/?lang=original
项目主页：https://github.com/Arshiash80/strapi-plugin-iconhub#readme
源码仓库：https://github.com/Arshiash80/strapi-plugin-iconhub
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：104 MB，556 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：8 个
- peer 依赖：@strapi/sdk-plugin ^5\.3\.2，@strapi/strapi ^5\.11\.3，react ^18\.3\.1，react-dom ^18\.3\.1，react-router-dom ^6\.30\.0，styled-components ^6\.1\.16
- 首次发布：2025-03-25T22:17:51.560Z
- 最新版本发布：2026-04-19T12:22:48.635Z
- 近 30 天下载量：2271（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 3 个）
## 中文简介
Strapi 的图标拾取器插件带有图标集成——搜索,选择,并存储有生SVG的图标用于高性能渲染.
## 安装
```sh
npm install @arshiash80/strapi-plugin-iconhub
```
也可以使用：`pnpm add @arshiash80/strapi-plugin-iconhub`、`yarn add @arshiash80/strapi-plugin-iconhub`、`bun add @arshiash80/strapi-plugin-iconhub`
## README
# Strapi 图标Hub
IconHub是Strapi的自定义字段,将Iconify目录带入管理员面板. 编辑器可以浏览图标集,在全球搜索,详细检查单个集,应用颜色,或者存储图标名称,生SVG,或者两者兼而有之.
[](https://strapi.io/) [](https://www.typescriptlang.org/) [](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/LICENSE)
## 目录
- [演示](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-demo)
- [为什么图标Hub](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-why-iconhub)
- [兼容性](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-compatibility)
- [安装](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-installation)
- [将字段添加到内容类型](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-add-the-field-to-a-content-type)
- [外地配置](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-field-configuration)
- [编辑工作流程](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-editor-workflow)
- [存储值形状](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-stored-value-shape)
- [前端渲染](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-frontend-rendering)
- [发展](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-development)
- [文件资产](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-documentation-assets)
- [许可证](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/#readme-license)
## 演示
[直接打开演示视频](https://npmcn.com/package/%40arshiash80/strapi-plugin-iconhub/assets/docs/IconHubPluginDemo.mp4)
演示涵盖了取取取器流,图标设置浏览,图标编辑,和色彩定制.
## 为什么图标Hub
- 为 Strapi 编辑所建, 不仅仅是开发代码中的线条图标
- 在不传送捆绑的图标包的情况下,通过图标访问20万多图标
- 内容 - 类型构建器中的类别级别限制,以保持字段的焦点
- 收藏- 首个浏览流程, 用于未知确切图标名称的团队
- 用于快速前端渲染和外部API独立性的 Raw SVG 存储支持
## 兼容性
- 斯特拉皮 v4 和 v5
- TypeScript 已准备好的管理员和服务器包
- 使名称、生的 SVG 或两者都成为图标的前端
## 安装
```bash
npm i @arshiash80/strapi-plugin-iconhub
```
安装后重建管理面板 :
```bash
npm run build
npm run develop
```
校验插件在 **设置 > 插件**。 。 。 .
## 将字段添加到内容类型
打开 **内容- 类型构建器**字段,并选择 **图标Hub**。 。 。 .
 
字段然后像其他任何斯特拉皮输入一样出现在内容条目UI中.
## 外地配置
### 储存战略
IconHub 支持三种存储模式:
- `iconName`: 存储图标标识符, 如 `mdi:home`
- `iconData`: 存储原始 SVG 标记
- 两者: 保持标识符和SVG 并保持最大灵活性
这是在字段设置中配置的 .
### 限制可用的图标集类别
单位 **基本设置**,您可以决定此字段可用的“图标”收藏类别。 这是将取取取器缩小到设计系统,品牌图标家族,只用emoji字段,以及类似的编辑用例的主要控制.
## 编辑工作流程
### 1\. 浏览图标集
默认取取器状态是围绕图标集发现构建的. 编辑器可以先浏览允许的分类,然后在需要更紧的视觉搜索空间时打开一个集.
  
### 2\. 完善现有套装
发现视图支持元数据驱动过滤常见浏览模式:
- 标签过滤
- 网格/ 图标高度过滤
- 调色板和许可证过滤
  
### 3\. 全球搜索或打开特定集
编辑器可以从主工具栏中搜索所有允许的集,或者打开一集用于焦点浏览和内置搜索.
设定浏览器保持当前设定的上下文可见 :
- 设置名称和作者
- 图标计数
- 调色板信息
- 集中类别芯片
- 设置本地搜索输入
### 4\. 审查不同的偶像家庭
采取器在单色和多色两种相间都效果良好.
   
### 5\. 编辑和自定义所选图标
一旦选定了图标,字段会在入项表单中显示被选中的图标并曝光编辑动作以作进一步调整.
 
编辑模式包括:
- 现场预览
- 视觉取色器
- 六进制输入
- 图标名称和原始 SVG 编辑控制
- 输出资产的下载动作
 
## 存储值形状
根据配置情况,IconHub存储以下部分或全部字段:
```ts
type IconFieldValue = {
iconName: string | null;
iconData: string | null;
width: number | null;
height: number | null;
color?: string | null;
isSvgEditable?: boolean;
isIconNameEditable?: boolean;
};
```
## 前端渲染
### 从 `iconName`
如果您想要将图标解析出前端的图标, 请使用此选项 :
```tsx
import { Icon } from '@iconify/react';
type IconValue = {
iconName: string | null;
width: number | null;
height: number | null;
color?: string | null;
};
export function IconFromName({ value }: { value: IconValue }) {
if (!value.iconName) return null;
return (
);
}
```
### 从 `iconData`
如果您想要对 SVG 进行全面控制, 并且不想要运行时图标检查时使用此选项 :
```tsx
type IconValue = {
iconData: string | null;
width: number | null;
height: number | null;
color?: string | null;
};
export function IconFromSvg({ value }: { value: IconValue }) {
if (!value.iconData) return null;
return (
);
}
```
## 发展
有用的本地命令 :
```bash
npm run build
npm run watch
npm run watch:link
npm run verify
npm run docs:sync-media
npm run docs:readme
```
类型检查可直接运行于 `tsc`数字 :
```bash
npx tsc -p admin/tsconfig.json --noEmit
npx tsc -p server/tsconfig.json --noEmit
```
## 文件资产
文件图像和视频存储于 `assets/docs/`更新 `README.source.md`,同步后将资产更改为 Cloudinary ,然后重新生成已发布的 README :
```bash
npm run docs:sync-media
npm run docs:readme
```
Cloudinary同步脚本上传只更改了 README 资产, 将其内容散列存储到 `docs/readme-media-manifest.json`,并允许 `README.md` 使用 Cloudinary 发送 URL 进行市场安全媒体渲染 。 未识别资产回落到jsDelivr URL.
## 许可证
麻省理工学院
## 常见问题
### @arshiash80/strapi-plugin-iconhub 是什么？
Strapi 的图标拾取器插件带有图标集成——搜索,选择,并存储有生SVG的图标用于高性能渲染\.
### 如何安装 @arshiash80/strapi-plugin-iconhub？
在项目目录运行 npm install @arshiash80/strapi-plugin-iconhub，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@strapi/sdk-plugin（^5\.3\.2）、@strapi/strapi（^5\.11\.3）、react（^18\.3\.1）、react-dom（^18\.3\.1）、react-router-dom（^6\.30\.0）、styled-components（^6\.1\.16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @arshiash80/strapi-plugin-iconhub 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @arshiash80/strapi-plugin-iconhub 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @arshiash80/strapi-plugin-iconhub 可以商用吗？
@arshiash80/strapi-plugin-iconhub 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @arshiash80/strapi-plugin-iconhub 的下载量有多少？
根据 npm 官方下载统计，@arshiash80/strapi-plugin-iconhub 在 2026/10/07 – 2026/11/05 这 30 天内被下载 2,271 次，日均约 76 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @arshiash80/strapi-plugin-iconhub 还在维护吗？
最新版本 1\.3\.1 发布于 2026/04/19（6 个月前）；至今共发布 9 个版本，其中过去 12 个月发布了 3 个；首次发布于 2025/03/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。