Gathering detailed insights and metrics for phosphor-react-native
phosphor-icons for react-native. A flexible icon family for React Native
Installations
npm install phosphor-react-nativeDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
23.6.0
NPM Version
11.0.0
Releases
16
Contributors
7
Languages
2
TypeScript
JavaScript
TypeScript (73.61%)
JavaScript (26.39%)
Developer
Download Statistics
Total Downloads
696,278
Last Day
2,010
Last Week
8,685
Last Month
37,978
Last Year
399,321
GitHub Statistics
204 Stars
57 Commits
26 Forks
6 Watching
4 Branches
7 Contributors
Bundle Size
4.54 MB
Minified
941.30 kB
Minified + Gzipped
Maintainers
4
Package Meta Information
Latest Version
2.3.1
Package Id
phosphor-react-native@2.3.1
Unpacked Size
21.90 MB
Size
2.65 MB
File Count
18,167
NPM Version
11.0.0
Node Version
23.6.0
Publised On
25 Jan 2025
Total Downloads
Cumulative downloads
Total Downloads
696,278
Last day
-0.5%
2,010
Compared to previous day
Last week
-12.6%
8,685
Compared to previous week
Last month
-13.7%
37,978
Compared to previous month
Last year
103.8%
399,321
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
3
Dev Dependencies
33
@commitlint/config-conventional@eslint/eslintrc@eslint/js@release-it/conventional-changelog@svgr/babel-plugin-add-jsx-attribute@svgr/core@svgr/plugin-jsx@svgr/plugin-svgo@types/eslint__js@types/jest@types/react@types/react-nativecaniuse-litecasechalkcommitlinteslinteslint-config-prettiereslint-plugin-ft-floweslint-plugin-prettierfs-extraglobalshuskyjestpod-installprettierreactreact-nativereact-native-builder-bobreact-native-svgrelease-ittypescripttypescript-eslint
Versions
phosphor-react-native
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com. Inspired by phosphor-react.
| 
| 
|
| 
| 
|
Installation
1yarn add phosphor-react-native
or
1npm install --save phosphor-react-native
Usage
Simply import the icons you need, and add them anywhere in your render method. Phosphor supports tree-shaking, so your bundle only includes code for the icons you use.
1import React from 'react'; 2import { View } from 'react-native'; 3import { Horse, Heart, Cube } from 'phosphor-react-native'; 4 5const App = () => { 6 return ( 7 <View> 8 <Horse /> 9 <Heart color="#AE2983" weight="fill" size={32} /> 10 <Cube color="teal" weight="duotone" /> 11 </View> 12 ); 13};
Typescript support
If you get this error...
Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Svg> & Pick<Readonly<SvgProps>, "children" | "style" | ... 144 more ... | "fontVariationSettings"> & InexactPartial<...> & InexactPartial<...>'
Add this code to your global.d.ts file
1import type { SvgProps as DefaultSvgProps } from 'react-native-svg'; 2 3declare module 'react-native-svg' { 4 interface SvgProps extends DefaultSvgProps { 5 className?: string; 6 } 7}
Props
Icon components accept all props that you can pass to a normal SVG element, including inline style objects, onClick handlers, and more. The main way of styling them will usually be with the following props:
- color?:
string– Icon stroke/fill color. Can be any CSS color string, includinghex,rgb,rgba,hsl,hsla, named colors. - size?:
number | string– Icon height & width. As with standard React elements, this can be a number, or a string with units inpx,%,em,rem,pt,cm,mm,in. - weight?:
"thin" | "light" | "regular" | "bold" | "fill" | "duotone"– Icon weight/style. Can also be used, for example, to "toggle" an icon's state: a rating component could use Stars withweight="regular"to denote an empty star, andweight="fill"to denote a filled star. - mirrored?:
boolean– Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate. - title?:
string– Accessibility label - titleId?:
string– Accessibility label ID - testID?:
string– testID for tests - duotoneColor?:
string– Duotone fill color. Can be any CSS color string, includinghex,rgb,rgba,hsl,hsla, named colors. Default value to black. - duotoneOpacity?:
number– The opacity of the duotoneColor. Default value to 0.2.
Context
Phosphor takes advantage of React Context to make applying a default style to all icons simple. Create an IconContext.Provider at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons:
1import React from 'react'; 2import { View } from 'react-native'; 3import { IconContext, Horse, Heart, Cube } from 'phosphor-react-native'; 4 5const App = () => { 6 return ( 7 <IconContext.Provider 8 value={{ 9 color: 'limegreen', 10 size: 32, 11 weight: 'bold', 12 }} 13 > 14 <View> 15 <Horse /> {/* I'm lime-green, 32px, and bold! */} 16 <Heart /> {/* Me too! */} 17 <Cube /> {/* Me three :) */} 18 </View> 19 </IconContext.Provider> 20 ); 21};
You may create multiple Contexts for styling icons differently in separate regions of an application; icons use the nearest Context above them to determine their style.
Imports
You may wish to import all icons at once for use in your project, though depending on your bundler this could prevent tree-shaking and make your app's bundle larger.
1import * as Icon from "phosphor-react-native"; 2... 3<Icon.Smiley /> 4<Icon.Folder weight="thin" /> 5<Icon.BatteryHalf size="24px" /> 6<Icon.AirplaneTakeoff size="24px" mirrored={true} />
In cases where tree shaking does not work (resulting in large bundle size), you can import icons individually in this format:
1// Javascript 2import Star from "phosphor-react-native/lib/commonjs/icons/Star"; 3 4// Typescript 5import Star from 'phosphor-react-native/src/icons/Star'; 6 7<Star size="24px" />
Related Projects
- phosphor-home ▲ Phosphor homepage and general info
- phosphor-react ▲ Phosphor icon component library for React
- phosphor-vue ▲ Phosphor icon component library for Vue
- phosphor-icons ▲ Phosphor icons for Vanilla JS
- phosphor-flutter ▲ Phosphor IconData library for Flutter
- phosphor-webcomponents ▲ Phosphor icons as Web Components
- phosphor-figma ▲ Phosphor icons Figma plugin
- phosphor-sketch ▲ Phosphor icons Sketch plugin
License
MIT
No vulnerabilities found.
No security vulnerabilities found.