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: 3 days ago
JSON representation
It makes it very simple to use SVG icons in your React and React-Native projects.
- Host: GitHub
- URL: https://github.com/aykutkardas/react-icomoon
- Owner: aykutkardas
- License: mit
- Created: 2018-06-19T11:55:49.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-10-23T12:23:59.000Z (over 1 year ago)
- Last Synced: 2024-05-01T15:06:18.660Z (9 months ago)
- Topics: hacktoberfest, icomoon, icon, icons, react, react-native, reactjs, svg, svg-icons
- Language: TypeScript
- Homepage: https://svgps.app
- Size: 733 KB
- Stars: 216
- Watchers: 6
- Forks: 22
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-react-native - react-icomoon - With React-Icomoon you can easily use the icons you have selected or created in icomoon. 📦 Zero Dependencies and Lightweight. (Components / UI)
- awesome-react-components - react-icomoon - With react-icomoon you can easily use the icons you have selected or created in icomoon. (UI Components / Icons)
- awesome-react-native - react-icomoon - With React-Icomoon you can easily use the icons you have selected or created in icomoon. 📦 Zero Dependencies and Lightweight. (Components / UI)
- awesome-react-components - react-icomoon - With react-icomoon you can easily use the icons you have selected or created in icomoon. (UI Components / Icons)
- awesome-react-native - react-icomoon - With React-Icomoon you can easily use the icons you have selected or created in icomoon. 📦 Zero Dependencies and Lightweight.  (Components / Icon)
- fucking-awesome-react-components - react-icomoon - With react-icomoon you can easily use the icons you have selected or created in icomoon. (UI Components / Icons)
- awesome-react-components - react-icomoon - With react-icomoon you can easily use the icons you have selected or created in icomoon. (UI Components / Icons)
- awesome-react-components - react-icomoon - With react-icomoon you can easily use the icons you have selected or created in icomoon. (UI Components / Icons)
README
[](https://github.com/aykutkardas/react-icomoon/actions)
[](https://www.npmjs.com/package/react-icomoon)
[](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)