react-icomoon

It allows you to simply view the icons in the selection.json file provided by Icomoon.

Usage no npm install needed!

<script type="module">
  import reactIcomoon from 'https://cdn.skypack.dev/react-icomoon';
</script>

README

React-IcoMoon

Build Status npm npm License

React-Icomoon Logo

📦 Zero Dependencies

With React-Icomoon you can easily use the icons you have selected or created in icomoon.

Demo

Install

npm install react-icomoon

Usage

You can use the icons you selected on IcoMoon by downloading the selection.json file.

https://icomoon.io/app/

Declare

// icon.js
import React from "react";
import IcoMoon from "react-icomoon";
const iconSet = require("./selection.json");

const Icon = ({ ...props }) => {
  return <IcoMoon iconSet={iconSet} {...props} />;
};

export default Icon;

Use

import Icon from "./icon";

<Icon icon="pencil" size={20} color="orange" />;

Props List

Name Type Default Sample
iconSet Object undefined "selection.json file content"
icon String undefined "home"
size Number,String undefined "1em", 10, "100px"
color String undefined "red", "#f00", "rgb(0,0,0)"
style Object {...} { color: '#ff0'}
title String undefined "Icon Title"
className String undefined "icomoon"
disableFill Boolean undefined true
removeInlineStyle Boolean undefined true

Default Style

{
  display: "inline-block",
  stroke: "currentColor",
  fill: "currentColor",
}

iconList

You can use the iconList method to see a complete list of icons you can use.

import IcoMoon, { iconList } from "react-icomoon";

iconList(iconSet);

// sample output
[
  "document",
  "camera",
  "genius",
  "chat",
  "heart1",
  "alarmclock",
  "star-full",
  "heart",
  "play3",
  "pause2",
  "bin1",
];

React Native 🎉 • Demo

Step 1: Install Dependencies

npm install react-icomoon react-native-svg

Step 2: Declare

Additional props for React Native

Name Type Default Sample
native Boolean undefined true
SvgComponent React.Component undefined SvgComponent
PathComponent React.Component undefined PathComponent
// icon.js
import React from "react";
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
const iconSet = require("./selection.json");

const Icon = ({ ...props }) => {
  return (
    <IcoMoon
      native
      SvgComponent={Svg}
      PathComponent={Path}
      iconSet={iconSet}
      {...props}
    />
  );
};

export default Icon;

Step 3: Usage

import Icon from "./icon";

<Icon icon="pencil" size={20} color="orange" />;