react-native-feather-icon/README.md

A ready-to-use customizable react native component for feather icons.

# React Native Feather Icon

A lightweight and customizable React Native component for Feather icons. This package provides an easy-to-use wrapper around `react-native-feather` with TypeScript support.

Works well on <b>Expo</b> and <b>React Native CLI</b>.

## Installation

First, install the package:

```bash
npm install react-native-feather-icon
# or
yarn add react-native-feather-icon
```

This package requires `react-native-feather` as a peer dependency. If you haven't installed it yet:

```bash
npm install react-native-feather
# or
yarn add react-native-feather
```

## Examples

<p align="center">
  <img src="https://res.cloudinary.com/dlo8tndg7/image/upload/fl_preserve_transparency/v1739608904/Simulator_Screenshot_-_iPhone_15_Pro_Max_-_2025-02-15_at_10.46.36_wuit33.jpg?_s=public-apps" width="35%" />
  <img src="https://res.cloudinary.com/dlo8tndg7/image/upload/v1739608904/Simulator_Screenshot_-_iPhone_15_Pro_Max_-_2025-02-15_at_10.34.07_fox1cc.png" width="35%" />
</p>

## Usage

```tsx
import FeatherIcon from 'react-native-feather-icon';

// Basic usage
<FeatherIcon iconName="Heart" />

// Customized icon
<FeatherIcon
  iconName="User"
  color="#FF0000"
  width={24}
  height={24}
  strokeWidth={2}
/>

// With style prop
<FeatherIcon
  iconName="ArrowRight"
  style={{ marginRight: 10 }}
/>
```

## Props

| Prop          | Type                   | Default     | Description                              |
| ------------- | ---------------------- | ----------- | ---------------------------------------- |
| `iconName`    | `string`               | `'Circle'`  | Name of the Feather icon to display      |
| `color`       | `string`               | `'#7D7D7D'` | Color of the icon                        |
| `width`       | `number`               | `15`        | Width of the icon                        |
| `height`      | `number`               | `15`        | Height of the icon                       |
| `strokeWidth` | `number`               | `2`         | Stroke width of the icon                 |
| `style`       | `StyleProp<ViewStyle>` | -           | Additional styles for the icon container |

## Icons List

All Feather icons are available in this package. You can browse the complete list at:
[Feather Icons: https://feathericons.com ](https://feathericons.com)

> **Important**: Icon names should be in PascalCase format.
> Examples:
>
> - `arrow-right` → `'ArrowRight'`
> - `user-plus` → `'UserPlus'`
> - `log-out` → `'LogOut'`

> - <img width="400" alt="https://feathericons.com" src="https://res.cloudinary.com/dlo8tndg7/image/upload/v1739608904/feathericonn_n8e2ql.png"  />

## Features

- 🎨 Fully customizable (color, size, stroke width)
- 📱 TypeScript support
- 🪶 Access to all Feather icons
- ⚡️ Lightweight
- 🔄 Fallback to Circle icon if invalid icon name is provided

## Requirements

- React Native >= 0.64.0
- React >= 17.0.0
- react-native-feather >= 1.1.2

## License

MIT

## Author

Hilal Oruç

## Contributing

Contributions, issues, and feature requests are welcome!

## Support

If you like this project, please give it a ⭐️ on GitHub!