Package Exports

react-icomoon

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-icomoon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-IcoMoon

npm

📦 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" />;