Strapi Plugin React Icons

A plugin for Strapi v4 that gives users a custom field and search bar for the library react-icons.

Installation

Step 1: Install with package manager of your choice.

Install strapi-react-icons with yarn or npm:

• Install with yarn:

  yarn add strapi-react-icons

• Install with npm:

  npm i strapi-react-icons

Step 2: Rebuild your Strapi Admin Panel:

• Rebuild with yarn:

  yarn build

• Rebuild with npm:

  npm run build

Screenshot Guide

Step 1:

Navigate to the strapi-react-icons settings page (Shown in the screenshot below):

Step 2:

Click the button that says "Import default icon libraries" to import the icons:

• The functionality to disable/enable select libraries is not implemented yet, so leave the checkboxes as-is.
• You will be able to filter the libraries, somewhat, when interacting with the field.

Step 3:

In your Content-Type Builder, press the Add new field button. Navigate to the tab that says CUSTOM and click on the field labelled, react-icon.

Press Save to save to restart your Strapi server.

Step 4:

Navigate to your select Content Type that you just created and click on the search icon to bring up an icon search modal.

By default, all icon libraries are (lazily) loaded.

Step 5:

In order to find the icons you want, you can either search for the keyword using the search bar, or you can filter the icons shown using the select menu in the bottem left hand side of the modal.

No Filtering, searching for a briefcase icon.

Filtering to only show Font Awesome 5 Icons (fa5), searching for a briefcase icon.

Step 6:

Click on the icon that best suits your needs, it should populate the custom field.

Finally, press Save to save your changes and Publish to publish them. Enjoy!

Usage/Examples

In Strapi v4

• 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.

In React / Next.js

Create the following IconComponent to dynamically show the icon:

import * as ReactIcons from "react-icons/all";

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} />;
};

Roadmap

• Add a default All Libraries option to the modal.

• Fix varying bugs.

Authors

• @DanielPantle

Contributers

• @prestonator