@vuduc0801/react-native-phosphor-icons
Version:
Since [Phosphor](https://phosphoricons.com/) does not support React Native, we have to convert all the SVGs to React Native SVGs.
61 lines (43 loc) • 1.78 kB
Markdown
# /react-native-phosphor-icons
Since [Phosphor](https://phosphoricons.com/) does not support React Native, we have to convert all the SVGs to React Native SVGs.
This package is heavily inspired by [duongdev/phosphor-react-native](https://github.com/duongdev/phosphor-react-native)
## Installation
```
npm install /react-native-phosphor-icons
```
### Peer dependencies
Make sure you have [react-native-svg](https://github.com/software-mansion/react-native-svg) installed.
## Usage
```javascript
import { View } from 'react-native'
import { Horse, Heart, Cube } from '/react-native-phosphor-icons'
const App = () => {
return (
<View>
<Horse />
<Heart color="#AE2983" weight="fill" size={32} />
<Cube color="teal" weight="bold" />
</View>
)
}
```
### Tree-shaking / Individual icon imports
The barrel import re-exports all icons. If your bundler does not tree-shake (e.g. Metro by default), you can import individual icons directly to keep your bundle small:
```javascript
import Acorn from '/react-native-phosphor-icons/icons/Acorn'
import Heart from '/react-native-phosphor-icons/icons/Heart'
```
This bypasses the barrel file and only loads the icons you actually use.
### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `color` | `string` | `"#000"` | Icon stroke/fill color. |
| `size` | `number \| string` | `24` | Icon height & width. |
| `weight` | `"regular" \| "fill" \| "bold"` | `"regular"` | Icon weight/style. |
| `mirrored` | `boolean` | `false` | Flip the icon horizontally. Useful for RTL languages. |
| `style` | `StyleProp<ViewStyle>` | — | Additional styles applied to the icon. |
## Build
```
npm run generate
npm run build
```