# @vuduc0801/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 @vuduc0801/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 '@vuduc0801/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 '@vuduc0801/react-native-phosphor-icons/icons/Acorn'
import Heart from '@vuduc0801/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
```