|
1 | | -## React Native Feather Icons |
| 1 | +# react-native-feather |
2 | 2 |
|
3 | | -[](https://www.npmjs.com/package/react-native-feather) |
4 | | -[](https://www.npmjs.com/package/react-native-feather) |
| 3 | +[](https://www.npmjs.com/package/react-native-feather) |
| 4 | +[](https://www.npmjs.com/package/react-native-feather) |
| 5 | +[](https://bundlephobia.com/package/react-native-feather) |
| 6 | +[](./LICENSE) |
5 | 7 |
|
6 | | -#### What is react-native-feather? |
| 8 | +[Feather Icons](https://feathericons.com) for React Native — a thin, typed, tree-shakable wrapper around `react-native-svg`. 287 icons, ref-forwarding, `size`/`color`/`absoluteStrokeWidth` props. |
7 | 9 |
|
8 | | -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. |
| 10 | +> **Note on the icon set.** Feather is designed by [Cole Bemis](https://github.com/feathericons/feather) (MIT). The set is largely stable — the upstream is in maintenance mode and no new icons have shipped since 2020. If you need a constantly growing set, consider [Lucide](https://lucide.dev) (the active fork). This package keeps the original Feather set faithful for projects that want exactly that. |
9 | 11 |
|
10 | | -At its core, Feather 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 all Feather icons converted to make compatible with [`react-native-svg`](https://github.com/react-native-community/react-native-svg) package. |
| 12 | +## Install |
11 | 13 |
|
12 | | -#### Based on Feather Icons `v4.28.0` |
| 14 | +```bash |
| 15 | +npm install react-native-feather react-native-svg |
| 16 | +# or |
| 17 | +yarn add react-native-feather react-native-svg |
| 18 | +``` |
| 19 | + |
| 20 | +`react-native-svg` is a peer dependency. Any version `>=12` works. |
13 | 21 |
|
14 | | -## Installation |
| 22 | +## Usage |
15 | 23 |
|
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-feather` |
| 24 | +```tsx |
| 25 | +import { ArrowUpCircle } from 'react-native-feather'; |
18 | 26 |
|
19 | | -### Icons |
| 27 | +export const Demo = () => <ArrowUpCircle />; |
| 28 | +``` |
20 | 29 |
|
21 | | -List of available icons in this component. |
22 | | -[https://feathericons.com](https://feathericons.com/) |
| 30 | +Override defaults with props: |
23 | 31 |
|
24 | | -### Usage |
| 32 | +```tsx |
| 33 | +<ArrowUpCircle size={32} color="#0ea5e9" strokeWidth={1.5} /> |
| 34 | +``` |
25 | 35 |
|
26 | | -To use icons as component, all icon names is formatted to Pascal Case. |
27 | | -arrow-up-circle => `<ArrowUpCircle/>` |
| 36 | +You can also import the whole pack: |
28 | 37 |
|
29 | | -```javascript |
30 | | -import { ArrowUpCircle } from "react-native-feather"; |
| 38 | +```tsx |
| 39 | +import * as Icon from 'react-native-feather'; |
31 | 40 |
|
32 | | -const App = () => { |
33 | | - return <ArrowUpCircle />; |
34 | | -}; |
| 41 | +<Icon.ArrowUpCircle /> |
35 | 42 | ``` |
36 | 43 |
|
37 | | -Icons can be configured with inline props: |
| 44 | +Or deep-import a single icon (helps with bundlers that don't tree-shake well): |
38 | 45 |
|
39 | | -```javascript |
40 | | -<ArrowUpCircle stroke="red" fill="#fff" width={32} height={32} /> |
| 46 | +```tsx |
| 47 | +import { ArrowUpCircle } from 'react-native-feather/icons/ArrowUpCircle'; |
41 | 48 | ``` |
42 | 49 |
|
43 | | -You can also include the whole icon pack: |
| 50 | +### Forwarded refs |
| 51 | + |
| 52 | +Every icon forwards its ref to the underlying `Svg`, so you can drive imperative APIs (e.g. `react-native-reanimated`) directly: |
| 53 | + |
| 54 | +```tsx |
| 55 | +import { useRef } from 'react'; |
| 56 | +import { Activity } from 'react-native-feather'; |
| 57 | + |
| 58 | +const ref = useRef(null); |
| 59 | +<Activity ref={ref} /> |
| 60 | +``` |
| 61 | + |
| 62 | +## Props |
| 63 | + |
| 64 | +All `react-native-svg` `<Svg>` props are accepted. Specific to icons: |
| 65 | + |
| 66 | +| Prop | Type | Default | Description | |
| 67 | +| --------------------- | ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ | |
| 68 | +| `size` | number \| string | `24` | Sets both `width` and `height`. | |
| 69 | +| `color` | string | `"currentColor"` | Stroke color of the line. | |
| 70 | +| `strokeWidth` | number \| string | `2` | Width of the stroke. | |
| 71 | +| `absoluteStrokeWidth` | boolean | `false` | Scales stroke down as the icon grows so perceived weight stays constant: `strokeWidth * 24 / size`. Useful at small sizes (16, 14). | |
| 72 | +| `width` | number \| string | — | Overrides `size` for width only. | |
| 73 | +| `height` | number \| string | — | Overrides `size` for height only. | |
| 74 | +| `fill` | string | `"none"` | Fill color (Feather icons are line-based, leave as `none` unless you know what you're doing). | |
| 75 | + |
| 76 | +## Migrating from v1 |
| 77 | + |
| 78 | +v2 is mostly drop-in. The breaking changes: |
44 | 79 |
|
45 | | -```javascript |
46 | | -import * as Icon from "react-native-feather"; |
| 80 | +- `width` / `height` defaults moved into a `size` prop. The old props still work; if you set both, the explicit one wins. |
| 81 | +- Use `color` instead of `stroke` (`stroke` still works but `color` is the documented prop). |
| 82 | +- Now ships ESM + CJS via the `exports` field. If your tooling pinned to `lib/index.js`, switch to the package name (e.g. `import { Activity } from 'react-native-feather'`). |
| 83 | +- Peer deps widened: `react-native-svg >=12`, `react >=16.8`. |
47 | 84 |
|
48 | | -const App = () => { |
49 | | - return <Icon.ArrowUpCircle />; |
50 | | -}; |
| 85 | +```diff |
| 86 | +- <ArrowUpCircle stroke="red" width={32} height={32} /> |
| 87 | ++ <ArrowUpCircle color="red" size={32} /> |
51 | 88 | ``` |
52 | 89 |
|
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 | | -<!-- readme: yigithanyucedag -start --> |
67 | | -<table> |
68 | | -<tr> |
69 | | - <td align="center"> |
70 | | - <a href="https://github.com/yigithanyucedag"> |
71 | | - <img src="https://avatars.githubusercontent.com/u/25598773?v=4" width="100;" alt="yigithanyucedag"/> |
72 | | - <br /> |
73 | | - <sub><b>Yiğithan</b></sub> |
74 | | - </a> |
75 | | - </td></tr> |
76 | | -</table> |
77 | | -<!-- readme: yigithanyucedag -end --> |
78 | | - |
79 | | -## Contributors |
80 | | - |
81 | | -<!-- readme: contributors -start --> |
82 | | -<table> |
83 | | -<tr> |
84 | | - <td align="center"> |
85 | | - <a href="https://github.com/yigithanyucedag"> |
86 | | - <img src="https://avatars.githubusercontent.com/u/25598773?v=4" width="100;" alt="yigithanyucedag"/> |
87 | | - <br /> |
88 | | - <sub><b>Yiğithan</b></sub> |
89 | | - </a> |
90 | | - </td> |
91 | | - <td align="center"> |
92 | | - <a href="https://github.com/FDiskas"> |
93 | | - <img src="https://avatars.githubusercontent.com/u/468006?v=4" width="100;" alt="FDiskas"/> |
94 | | - <br /> |
95 | | - <sub><b>Vytenis</b></sub> |
96 | | - </a> |
97 | | - </td></tr> |
98 | | -</table> |
99 | | -<!-- readme: contributors -end --> |
| 90 | +## Available icons |
| 91 | + |
| 92 | +All 287 icons from Feather Icons. Names follow PascalCase, matching the Feather identifier: |
| 93 | + |
| 94 | +`arrow-up-circle` → `ArrowUpCircle`, `alert-triangle` → `AlertTriangle`, etc. |
| 95 | + |
| 96 | +Browse the full set at [feathericons.com](https://feathericons.com). |
| 97 | + |
| 98 | +## Custom icons |
| 99 | + |
| 100 | +The factory used internally is exported, so you can ship custom icons that share the same API: |
| 101 | + |
| 102 | +```tsx |
| 103 | +import { createIcon } from 'react-native-feather'; |
| 104 | + |
| 105 | +export const Sparkle = createIcon('Sparkle', [ |
| 106 | + ['path', { d: 'M12 2 14 10 22 12 14 14 12 22 10 14 2 12 10 10z', key: 'svg-0' }], |
| 107 | +]); |
| 108 | +``` |
| 109 | + |
| 110 | +## Credits |
| 111 | + |
| 112 | +- **Icons:** [Feather Icons](https://github.com/feathericons/feather) by [Cole Bemis](https://github.com/colebemis), MIT. |
| 113 | +- **React Native wrapper:** maintained by [@yigithanyucedag](https://github.com/yigithanyucedag), MIT. |
| 114 | + |
| 115 | +## License |
| 116 | + |
| 117 | +[MIT](./LICENSE) |
0 commit comments