It makes it very simple to use SVG icons in your React and React-Native projects.
Cheatsheet - Interactive Demo - Buy Me a Coffee
Install
npm install react-icomoon
yarn add react-icomoon
Usage
You can use svgps.app to access over 40,000 free icons and convert your own icons into selection.json.
Or you can use IcoMoon to generate the selection.json file.
Declare
// Icon.jsx
import IcoMoon from "react-icomoon";
import iconSet from "./selection.json";
const Icon = (props) => <IcoMoon iconSet={iconSet} {...props} />;
export default Icon;With TypeScript
// Icon.tsx
import IcoMoon, { IconProps } from "react-icomoon";
import iconSet from "./selection.json";
const Icon = (props: IconProps) => <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 | - | "selection.json file content" |
| icon | String | - | "home" |
| size | Number,String | - | "1em", 10, "100px" |
| color | String | - | "red", "#f00", "rgb(0,0,0)" |
| style | Object | {...} | { color: '#ff0'} |
| title | String | - | "Icon Title" |
| className | String | - | "icomoon" |
| disableFill | Boolean | - | true |
| removeInlineStyle | Boolean | - | 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
yarn add react-icomoon react-native-svg
Step 2: Declare
Additional props for React Native
| Name | Type | Default | Sample |
|---|---|---|---|
| native | Boolean | - | true |
| SvgComponent | React.Component | - | SvgComponent |
| PathComponent | React.Component | - | PathComponent |
// Icon.jsx
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
import iconSet from "./selection.json";
const Icon = (props) => (
<IcoMoon
native
SvgComponent={Svg}
PathComponent={Path}
iconSet={iconSet}
{...props}
/>
);
export default Icon;Step 3: Use
import Icon from "./Icon";
<Icon icon="pencil" size={20} color="orange" />;