Strapi 图标Hub
IconHub是Strapi的自定义字段,将Iconify目录带入管理员面板. 编辑器可以浏览图标集,在全球搜索,详细检查单个集,应用颜色,或者存储图标名称,生SVG,或者两者兼而有之.
目录
演示
演示涵盖了取取取器流,图标设置浏览,图标编辑,和色彩定制.
为什么图标Hub
- 为 Strapi 编辑所建, 不仅仅是开发代码中的线条图标
- 在不传送捆绑的图标包的情况下,通过图标访问20万多图标
- 内容 - 类型构建器中的类别级别限制,以保持字段的焦点
- 收藏- 首个浏览流程, 用于未知确切图标名称的团队
- 用于快速前端渲染和外部API独立性的 Raw SVG 存储支持
兼容性
- 斯特拉皮 v4 和 v5
- TypeScript 已准备好的管理员和服务器包
- 使名称、生的 SVG 或两者都成为图标的前端
安装
npm i @arshiash80/strapi-plugin-iconhub
安装后重建管理面板 :
npm run build
npm run develop
校验插件在 设置 > 插件。 。 。 .
将字段添加到内容类型
打开 内容- 类型构建器字段,并选择 图标Hub。 。 。 .
字段然后像其他任何斯特拉皮输入一样出现在内容条目UI中.
外地配置
储存战略
IconHub 支持三种存储模式:
iconName: 存储图标标识符, 如mdi:homeiconData: 存储原始 SVG 标记- 两者: 保持标识符和SVG 并保持最大灵活性
这是在字段设置中配置的 .
限制可用的图标集类别
单位 基本设置,您可以决定此字段可用的“图标”收藏类别。 这是将取取取器缩小到设计系统,品牌图标家族,只用emoji字段,以及类似的编辑用例的主要控制.
编辑工作流程
1. 浏览图标集
默认取取器状态是围绕图标集发现构建的. 编辑器可以先浏览允许的分类,然后在需要更紧的视觉搜索空间时打开一个集.
2. 完善现有套装
发现视图支持元数据驱动过滤常见浏览模式:
- 标签过滤
- 网格/ 图标高度过滤
- 调色板和许可证过滤
3. 全球搜索或打开特定集
编辑器可以从主工具栏中搜索所有允许的集,或者打开一集用于焦点浏览和内置搜索.
设定浏览器保持当前设定的上下文可见 :
- 设置名称和作者
- 图标计数
- 调色板信息
- 集中类别芯片
- 设置本地搜索输入
4. 审查不同的偶像家庭
采取器在单色和多色两种相间都效果良好.
5. 编辑和自定义所选图标
一旦选定了图标,字段会在入项表单中显示被选中的图标并曝光编辑动作以作进一步调整.
编辑模式包括:
- 现场预览
- 视觉取色器
- 六进制输入
- 图标名称和原始 SVG 编辑控制
- 输出资产的下载动作
存储值形状
根据配置情况,IconHub存储以下部分或全部字段:
type IconFieldValue = {
iconName: string | null;
iconData: string | null;
width: number | null;
height: number | null;
color?: string | null;
isSvgEditable?: boolean;
isIconNameEditable?: boolean;
};
前端渲染
从 iconName
如果您想要将图标解析出前端的图标, 请使用此选项 :
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 (
<Icon
icon={value.iconName}
width={value.width ?? 24}
height={value.height ?? 24}
color={value.color ?? undefined}
/>
);
}
从 iconData
如果您想要对 SVG 进行全面控制, 并且不想要运行时图标检查时使用此选项 :
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 (
<svg
width={value.width ?? 24}
height={value.height ?? 24}
viewBox={`0 0 ${value.width ?? 24} ${value.height ?? 24}`}
style={{ color: value.color ?? undefined }}
dangerouslySetInnerHTML={{ __html: value.iconData }}
/>
);
}
发展
有用的本地命令 :
npm run build
npm run watch
npm run watch:link
npm run verify
npm run docs:sync-media
npm run docs:readme
类型检查可直接运行于 tsc数字 :
npx tsc -p admin/tsconfig.json --noEmit
npx tsc -p server/tsconfig.json --noEmit
文件资产
文件图像和视频存储于 assets/docs/更新 README.source.md,同步后将资产更改为 Cloudinary ,然后重新生成已发布的 README :
npm run docs:sync-media
npm run docs:readme
Cloudinary同步脚本上传只更改了 README 资产, 将其内容散列存储到 docs/readme-media-manifest.json,并允许 README.md 使用 Cloudinary 发送 URL 进行市场安全媒体渲染 。 未识别资产回落到jsDelivr URL.
许可证
麻省理工学院