Skip to content

nezzard/strapi-plugin-react-icons

 
 

Repository files navigation

Strapi plugin react-icons

A plugin for strapi to select react icons.

grafik grafik grafik

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

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 :)

About

A plugin for strapi to select react icons.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.4%
  • JavaScript 0.6%