@vuduc0801/react-native-phosphor-icons

Since Phosphor 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

Installation

npm install @vuduc0801/react-native-phosphor-icons

Peer dependencies

Make sure you have react-native-svg installed.

Usage

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:

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