icomoon-react

React Component which let you use icomoon selection.json file to render SVG instead font

Short example can be found here

installation with YARN:

yarn add icomoon-react

installation with NPM:

npm install icomoon-react

Quick usage:

use selection.json generated from http://icomoon.io/app

• add your desired icons, select from ready library or add custom svg's
• once done click Generate Font
• click Download
• unzip package and grab your selection.json

1import iconSet from "somewhere/selection.json";
2import IcomoonReact, { iconList } from "icomoon-react";

than just use component in code:

1<IcomoonReact iconSet={iconSet} color="#444" size={100} icon="shower" />

To console.log all icons use: iconList(iconSet) function

Advanced usage:

To not include set all over again just create your wraper component:

Icon.tsx

1import React from "react";
2
3import IcomoonReact from "../IcomoonReact";
4import iconSet from "./pathToSelection/selection.json";
5
6const Icon: React.FC<{
7  color?: string,
8  size: string | number,
9  icon: string,
10  className?: string
11}> = props => {
12  const { color, size = "100%", icon, className = "" } = props;
13  return (
14    <IcomoonReact
15      className={className}
16      iconSet={iconSet}
17      color={color}
18      size={size}
19      icon={icon}
20    />
21  );
22};
23
24export default Icon;

App.tsx

1import React from "react";
2import Icon from "./Icon";
3
4const App = () => (
5  <div>
6    <Icon color="#444" size={100} icon="star" />
7  </div>
8);
9
10export default App;

Develop

clone repo git clone git@github.com:ponciusz/icomoon-react.git

yarn install

yarn start