|
| 1 | +## React Native Unicons Icons |
| 2 | + |
| 3 | +[](https://www.npmjs.com/package/react-native-unicons) |
| 4 | +[](https://www.npmjs.com/package/react-native-unicons) |
| 5 | + |
| 6 | +#### What is react-native-unicons? |
| 7 | + |
| 8 | +react-native-unicons is a collection of simply beautiful open source icons for React Native. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability. |
| 9 | + |
| 10 | +At its core, Unicons is a collection of SVG files. To use SVG files on React Native, [`react-native-svg`](https://github.com/react-native-community/react-native-svg) is needed. This component contains "line" style Unicons icons converted and made compatible with [`react-native-svg`](https://github.com/react-native-community/react-native-svg) package. |
| 11 | + |
| 12 | +#### Based on Unicons Icons `v4.0.0` |
| 13 | + |
| 14 | +## Installation |
| 15 | + |
| 16 | +1. Ensure sure you've installed [`react-native-svg`](https://github.com/react-native-community/react-native-svg) |
| 17 | +2. `npm i react-native-unicons` |
| 18 | + |
| 19 | +### Icons |
| 20 | + |
| 21 | +List of available icons in this component. |
| 22 | +[https://iconscout.com](https://iconscout.com/unicons/explore/line) |
| 23 | + |
| 24 | +### Usage |
| 25 | + |
| 26 | +To use icons as component, all icon names is formatted to Pascal Case. |
| 27 | +award-alt => `<AwardAlt />` |
| 28 | + |
| 29 | +```javascript |
| 30 | +import { AwardAlt } from "react-native-unicons"; |
| 31 | + |
| 32 | +const App = () => { |
| 33 | + return <AwardAlt />; |
| 34 | +}; |
| 35 | +``` |
| 36 | + |
| 37 | +Icons can be configured with inline props: |
| 38 | + |
| 39 | +```javascript |
| 40 | +<AwardAlt stroke="red" fill="#fff" width={32} height={32} /> |
| 41 | +``` |
| 42 | + |
| 43 | +You can also include the whole icon pack: |
| 44 | + |
| 45 | +```javascript |
| 46 | +import * as Icon from "react-native-unicons"; |
| 47 | + |
| 48 | +const App = () => { |
| 49 | + return <Icon.AwardAlt />; |
| 50 | +}; |
| 51 | +``` |
| 52 | + |
| 53 | +### Properties |
| 54 | + |
| 55 | +Any [Svg property](https://github.com/react-native-community/react-native-svg#common-props) and the following: |
| 56 | + |
| 57 | +| Prop | Description | Default | |
| 58 | +| ----------------- | -------------------------------------------------------------------- | ---------------- | |
| 59 | +| **`width`** | Width of the icon. | `24` | |
| 60 | +| **`height`** | Height of the icon. | `24` | |
| 61 | +| **`stroke`** | The stroke prop refers to the color outline the icon. | `"currentColor"` | |
| 62 | +| **`strokeWidth`** | The strokeWidth prop specifies the width of the outline on the icon. | `2` | |
| 63 | +| **`fill`** | The fill prop refers to the color inside the icon. | `"none"` | |
| 64 | + |
| 65 | +### Author |
| 66 | + |
| 67 | +<!-- readme: FDiskas -start --> |
| 68 | +<!-- readme: yigithanyucedag -end --> |
| 69 | + |
| 70 | +## Contributors |
| 71 | + |
| 72 | +<!-- readme: contributors -start --> |
| 73 | +<!-- readme: contributors -end --> |
0 commit comments