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:

1# in TypeScript: "/config/plugins.ts"
2export default ({ env }) => ({ "react-icons": true, });
3
4# in JavaScript: "/config/plugins.js"
5module.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 an icon from any of the selected icon libraries.

Usage in React / Next.js

Create the following IconComponent to dynamically show the icon:

1import loadable from '@loadable/component';
2import { IconType } from 'react-icons';
3
4interface IIconComponent {
5  icon: string;
6  size?: number;
7}
8export type IReactIcon = string;
9
10export const IconComponent: React.FC<IIconComponent> = ({ icon, size }) => {
11  const lib = icon.replace(/([a-z0-9])([A-Z])/g, '$1 $2').split(' ')[0].toLowerCase();
12  const DynamicIconComponent = loadable(() => import(`react-icons/${lib}/index.js`), { resolveComponent: (el) => el[icon] }) as IconType;
13
14  return <DynamicIconComponent size={size} />;
15};

Planned features

• custom field for react-icons
• selection modal for the custom field
• 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 :)