https://github.com/fdiskas/react-native-unicons

https://github.com/fdiskas/react-native-unicons

hacktoberfest icons react react-native svg

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/fdiskas/react-native-unicons
• Owner: FDiskas
• Created: 2021-06-30T16:10:24.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-01-20T12:28:38.000Z (almost 2 years ago)
• Last Synced: 2024-11-10T18:33:56.331Z (5 days ago)
• Topics: hacktoberfest, icons, react, react-native, svg
• Language: JavaScript
• Homepage: https://iconscout.com
• Size: 456 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## React Native Unicons Icons

[![npm version](https://img.shields.io/npm/v/react-native-unicons.svg?style=flat-square)](https://www.npmjs.com/package/react-native-unicons)

[![npm downloads](https://img.shields.io/npm/dm/react-native-unicons.svg?style=flat-square)](https://www.npmjs.com/package/react-native-unicons)

[![npm types](https://badgen.net/npm/types/react-native-unicons?style=flat-square)](https://www.npmjs.com/package/react-native-unicons)

[![dependency status](https://img.shields.io/librariesio/release/npm/react-native-unicons?style=flat-square)](https://www.npmjs.com/package/react-native-unicons)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-native-unicons?style=flat-square)](https://www.npmjs.com/package/react-native-unicons)

[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/FDiskas/react-native-unicons)

#### What is react-native-unicons?

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.

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.

#### Based on [Unicons Icons](https://www.npmjs.com/package/@iconscout/unicons) `v4.0.0`

## Installation

1. Ensure sure you've installed [`react-native-svg`](https://github.com/react-native-community/react-native-svg)

2. `npm i react-native-unicons`

### Icons

List of available icons in this package.

[https://iconscout.com](https://iconscout.com/unicons/explore/line)

### Usage

To use icons as component, all icon names is formatted to Pascal Case.

award-alt => ``

```javascript

import { AwardAlt } from "react-native-unicons";

const App = () => {

  return ;

};

```

Icons can be configured with inline props:

```javascript

```

You can also include the whole icon pack:

```javascript

import * as Icon from "react-native-unicons";

const App = () => {

  return ;

};

```

### Properties

Any [Svg property](https://github.com/react-native-community/react-native-svg#common-props) and the following:

| Prop              | Description                                                          | Default          |

| ----------------- | -------------------------------------------------------------------- | ---------------- |

| **`width`**       | Width of the icon.                                                   | `24`             |

| **`height`**      | Height of the icon.                                                  | `24`             |

| **`stroke`**      | The stroke prop refers to the color outline the icon.                | `"currentColor"` |

| **`strokeWidth`** | The strokeWidth prop specifies the width of the outline on the icon. | `2`              |

| **`fill`**        | The fill prop refers to the color inside the icon.                   | `"currentColor"` |

| **`color`**       | The color inside the icon.                                           | `"currentColor"` |

### Author

    

        

            

            


            Vytenis

        

    

## Contributors

    

        

            

            


            Vytenis