React Native component for Feather icons

React Native Feather Icons

react-native-feather 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, Feather is a collection of SVG files. To use SVG files on React Native, react-native-svg is needed. This component contains all Feather icons converted to make compatible with react-native-svg package.

Based on Feather Icons v4.28.0

Installation

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

Icons

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

Usage

To use icons as component, all icon names is formatted to Pascal Case. arrow-up-circle => <ArrowUpCircle/>

import { ArrowUpCircle } from "react-native-feather";

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

Icons can be configured with inline props:

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

You can also include the whole icon pack:

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

const App = () => {
  return <Icon.ArrowUpCircle />;
};

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. "none"

GitHub

https://github.com/yigithanyucedag/react-native-feather