React-IcoMoon
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.
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'} |
| 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
// 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
iconSet={iconSet}
SvgComponent={Svg}
PathComponent={Path}
{...props}
/>
);
};
export default Icon;
Step 3: Usage
import Icon from "./icon";
<Icon icon="pencil" size={20} color="orange" />;
56 Oct 7, 2021
77 Nov 11, 2022
122 Dec 31, 2022
136 Dec 30, 2022
114 Jul 18, 2022
30 Nov 25, 2022
1.2k Dec 16, 2022
16.3k Jan 5, 2023
222 Jul 14, 2022
32 May 26, 2020
188 Dec 23, 2022
21 Dec 13, 2022
12 Dec 4, 2022
3 May 6, 2022
56 Dec 23, 2022
8.4k Dec 31, 2022
88 Oct 31, 2022