Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/aykutkardas/react-icomoon

It makes it very simple to use SVG icons in your React and React-Native projects.
https://github.com/aykutkardas/react-icomoon

hacktoberfest icomoon icon icons react react-native reactjs svg svg-icons

Last synced: 28 days ago
JSON representation

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

Lists

README 

        
![React-Icomoon Logo](/banner.png)



[![Build Status](https://github.com/aykutkardas/react-icomoon/workflows/build/badge.svg?color=%234fc921)](https://github.com/aykutkardas/react-icomoon/actions)

[![npm](https://img.shields.io/npm/v/react-icomoon?color=%234fc921)](https://www.npmjs.com/package/react-icomoon)

![npm](https://img.shields.io/npm/dw/react-icomoon)

[![License](https://img.shields.io/badge/License-MIT-green.svg?color=%234fc921)](https://opensource.org/licenses/MIT)



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



### [Cheatsheet](https://cig2vx.csb.app/) - [Interactive Demo](https://codesandbox.io/s/react-icomoon-demo-13pce) - [Buy Me a Coffee](https://www.buymeacoffee.com/aykutkardas)



## Install



```

npm install react-icomoon

```



```

yarn add react-icomoon

```



## Usage



You can use [svgps.app](https://svgps.app/) to access over `40,000` free icons and convert your own icons into `selection.json`.



Or you can use [IcoMoon](https://icomoon.io/app/) to generate the `selection.json` file.



### Declare



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

```



### Use



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



### Default Style



```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](https://snack.expo.io/@aykutkardas/react-icomoon)



### **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 |



```js

// Icon.jsx

import IcoMoon from "react-icomoon";

import { Svg, Path } from "react-native-svg";

import iconSet from "./selection.json";



const Icon = (props) => (

  

);



export default Icon;

```



**Step 3:** Use



```js

import Icon from "./Icon";



;

```



### Related Links



- [vue-icomoon](https://github.com/aykutkardas/vue-icomoon)

- [svelte-icomoon](https://github.com/aykutkardas/svelte-icomoon)