How to add custom icomoon icon in React

Very simple tutorial on how to create a custom common icon pack for ReactJs

yarn add icomoon-react
or
npm i icomoon-react

First, go to icomoon.io, you can create e new set using available icon or you can upload your own icon in SVG format. Other than that, you can also upload selection.json from the previous project and it can load all selected icons.

Select all the icons you want and go to Generate Font on the bottom right. There you can preview and rename your selected icons.

After that, Download button will appear on the same tab as the generate font tab. You can download and insert generate font selection.json in your project.

The usage is very simple using icomoon-react:

import React from "react";
import IcomoonReact from "../IcomoonReact";
import iconSet from "./pathToSelection/selection.json";
const Icon: React.FC<{
     color?: string,
     size: string | number,
     icon: string,
     className?: string
}> = props => {
const { color, size = "100%", icon, className = "" } = props;

return (
  <IcomoonReact
    className={className}
    iconSet={iconSet}
    color={color}
    size={size}
    icon={icon}
    />
  );
};
export default Icon;