react-icomoon

!React-Icomoon Logo

!npm

It makes it very simple to use SVG icons in your React and React-Native projects.

$3

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.

$3

`js
// Icon.jsx
import IcoMoon from "react-icomoon";
import iconSet from "./selection.json";

const Icon = (props) => ;

export default Icon;
`

#### With TypeScript

`tsx
// Icon.tsx
import IcoMoon, { IconProps } from "react-icomoon";
import iconSet from "./selection.json";

const Icon = (props: IconProps) => ;

export default Icon;
`

$3

`js
import Icon from "./Icon";

;
`

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 |

$3

`js
{
display: "inline-block",
stroke: "currentColor",
fill: "currentColor",
}
`

iconList

You can use the iconList method to see a complete list of icons you can use.

`js
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

$3

`
npm install react-icomoon react-native-svg
`

`
yarn add react-icomoon react-native-svg
`

$3

#### Additional props for React Native

| Name | Type | Default | Sample |
| ------------- | --------------- | ------- | ------------- |
| native | Boolean | - | true |
| SvgComponent | React.Component | - | SvgComponent |
| PathComponent | React.Component | - | PathComponent |

`js
// Icon.jsx
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
import iconSet from "./selection.json";

const Icon = (props) => (
native
SvgComponent={Svg}
PathComponent={Path}
iconSet={iconSet}
{...props}
/>
);

export default Icon;
`

Step 3: Use

`js
import Icon from "./Icon";

;
``

$3

- vue-icomoon
- svelte-icomoon