Strapi 插件反应相册
此分叉是基于 pardi v5 的此插件的升级版本, 新的 pardi/ dedesign- system 套件也有一些 UI 修改
用于 pandi 选择反应图标的插件 .
安装
要安装此插件, 您需要在您的 Strapi 应用程序中添加国家防范机制依赖性 :
# Using Yarn
yarn add strapi-plugin-react-icons
# Or using NPM
npm install strapi-plugin-react-icons
然后,你需要建立你的管理面板:
# 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;
计划特点
- 自定义反应相册字段
- 自定义字段的选择模式
- 启用/禁用图标库的设置页面
- 图标库的默认选择
- 在选择模式中搜索
贡献和发展
任何公关或问题