2023-09-27 23:50:19 +02:00
# Iconoir - React Native
2021-06-09 09:53:55 +02:00
2023-09-27 23:50:19 +02:00
[![NPM Version ](https://img.shields.io/npm/v/iconoir-react?style=flat-square )](https://www.npmjs.com/package/iconoir-react-native)
[![NPM Monthly Downloads ](https://img.shields.io/npm/dm/iconoir-react-native?style=flat-square )](https://www.npmjs.com/package/iconoir-react-native)
[![NPM License ](https://img.shields.io/npm/l/iconoir-react-native?style=flat-square )](https://github.com/iconoir-icons/iconoir/blob/main/packages/iconoir-react-native/LICENSE)
2021-06-09 09:53:55 +02:00
2023-09-27 23:50:19 +02:00
[Iconoir ](https://iconoir.com/ ) is an open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters.
2021-06-09 09:53:55 +02:00
2021-06-15 10:45:31 +02:00
`iconoir-react-native` is an open source package that exports these icons as React Native components (`react-native-svg`) that can be used in all of your React Native projects.
2021-06-09 09:53:55 +02:00
2022-08-28 20:12:09 +02:00
## Installation
2021-06-09 09:53:55 +02:00
2023-09-27 23:50:19 +02:00
| npm | Yarn |
| --------------------------------------------- | ------------------------------------------------ |
| `npm i iconoir-react-native react-native-svg` | `yarn add iconoir-react-native react-native-svg` |
2021-06-09 09:53:55 +02:00
2022-08-28 20:12:09 +02:00
## Usage
2021-06-09 09:53:55 +02:00
```javascript
import React from 'react';
2021-06-15 10:45:31 +02:00
import { View } from 'react-native';
import { Iconoir } from 'iconoir-react-native';
2021-06-09 09:53:55 +02:00
const App = () => {
2021-06-15 10:45:31 +02:00
return (
< View >
< Iconoir / >
< / View >
);
2021-06-09 09:53:55 +02:00
};
export default App;
```
2021-06-15 10:45:31 +02:00
Icons can take any `react-native-svg` properties as optional props, e.g.
2023-09-27 23:50:19 +02:00
2021-06-09 09:53:55 +02:00
```javascript
< Iconoir color = "red" height = {36} width = {36} / >
```
2023-09-27 23:50:19 +02:00
2021-06-09 09:53:55 +02:00
Default values for the most common props are given below:
| Prop name | Default value |
2023-09-27 23:50:19 +02:00
| ----------- | -------------- |
2021-06-09 09:53:55 +02:00
| color | "currentColor" |
| width | "1.5em" |
| height | "1.5em" |
| strokeWidth | 1.5 |
| fill | "none" |
2022-08-28 20:12:09 +02:00
## IconoirProvider
2021-06-09 09:53:55 +02:00
2022-08-28 20:12:09 +02:00
Tired of specifying the same props for every single icon, every time you use them? So were we. Use IconoirProvider to set the default icon props for everything inside IconoirProvider.
```tsx
2023-09-27 23:50:19 +02:00
import { IconoirProvider, Check } from 'iconoir-react-native';
2022-08-28 20:12:09 +02:00
return (
< IconoirProvider
iconProps={{
color: '#AAAAAA',
strokeWidth: 1,
width: '1em',
height: '1em',
}}
>
< SomeOtherContainer >
< Check / >
< / SomeOtherContainer >
< / IconoirProvider >
2023-09-27 23:50:19 +02:00
);
2022-08-28 20:12:09 +02:00
```
## Icon names
2021-06-09 09:53:55 +02:00
2023-10-29 10:53:44 +01:00
The React components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg` ).