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-reactornpm 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;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store