strapi-plugin-react-icons-pi
v0.2.6
Published
A plugin for strapi to select react icons.
Downloads
4
Readme
Strapi plugin react-icons
A plugin for strapi to select react icons.
Installation
To install this plugin, you need to add an NPM dependency to your Strapi application:
# Using Yarn
yarn add strapi-plugin-react-icons
# Or using NPM
npm install strapi-plugin-react-icons
Then, you'll need to build your admin panel:
# Using Yarn
yarn build
# Or using NPM
npm run build
Strapi plugins config file
Add "react-icons": true,
in you strapi plugins file.
If you do not have this file, create a file:
# in TypeScript: "/config/plugins.ts"
export default ({ env }) => ({ "react-icons": true, });
# in JavaScript: "/config/plugins.js"
module.exports = ({ env }) => ({ "react-icons": true, });
Usage
Usage in strapi
- Select your prefered icon libraries on the settings page.
- Add react-icon as custom field to your content type.
- Press the search icon to select a icon from any of the selected icon libraries.
Usage in React / Next.js
Create the following IconComponent to dynamically show the icon:
import * as ReactIcons from "react-icons/pi";
interface IIconComponent {
icon: string;
size?: number;
}
type IReactIcon = keyof typeof ReactIcons;
const IconComponent: React.FC<IIconComponent> = ({ icon, size }) => {
const DynamicIconComponent = ReactIcons[icon as IReactIcon];
if (undefined === DynamicIconComponent) return <></>;
return <DynamicIconComponent size={size} />;
};
Planned features
- [x] custom field for react-icons
- [x] selection modal for the custom field
- [x] settings page for enabling / disabling icon libraries
- [ ] default selection for icon library
- [ ] search in the selection modal
Contributing and developing
Feel free to post any PR or issues :)