📦 Zero Dependencies
With React-Icomoon you can easily use the icons you have selected or created in icomoon.
npm install react-icomoon
You can use the icons you selected on IcoMoon by downloading the selection.json file.
// 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;import Icon from "./icon";
<Icon icon="pencil" size={20} color="orange" />;| 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 |
{
display: "inline-block",
stroke: "currentColor",
fill: "currentColor",
}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" />;
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent