UNPKG

@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
# @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 ```