React Native Unicons Icons

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 is needed. This component contains "line" style Unicons icons converted and made compatible with react-native-svg package.

Based on Unicons Icons v4.0.0

Installation

1. Ensure sure you've installed react-native-svg
2. npm i react-native-unicons

Icons

List of available icons in this component. https://iconscout.com

Usage

To use icons as component, all icon names is formatted to Pascal Case. award-alt => <AwardAlt />

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

const App = () => {
  return <AwardAlt />;
};

Icons can be configured with inline props:

<AwardAlt stroke="red" fill="#fff" width={32} height={32} />

You can also include the whole icon pack:

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

const App = () => {
  return <Icon.AwardAlt color="red" />;
};

Properties

Any Svg property 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" |

Author

Contributors