Gathering detailed insights and metrics for @adriano-rodrigues99/phosphor-react-native
Gathering detailed insights and metrics for @adriano-rodrigues99/phosphor-react-native
Installations
npm install @adriano-rodrigues99/phosphor-react-nativeDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.20.0
NPM Version
8.19.4
Releases
Unable to fetch releases
Contributors
6
Unable to fetch Contributors
Languages
2
JavaScript
TypeScript
JavaScript (66.98%)
TypeScript (33.02%)
Developer
adriano-rodrigues99
Download Statistics
Total Downloads
761
Last Day
3
Last Week
6
Last Month
27
Last Year
198
GitHub Statistics
47 Commits
1 Watching
1 Branches
6 Contributors
Maintainers
1
Package Meta Information
Latest Version
1.4.0
Package Id
@adriano-rodrigues99/phosphor-react-native@1.4.0
Unpacked Size
92.04 MB
Size
4.22 MB
File Count
52,515
NPM Version
8.19.4
Node Version
16.20.0
Publised On
29 Sept 2023
Total Downloads
Cumulative downloads
Total Downloads
761
Last day
-50%
3
Compared to previous day
Last week
-14.3%
6
Compared to previous week
Last month
22.7%
27
Compared to previous month
Last year
-64.8%
198
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
3
Dev Dependencies
24
@commitlint/config-conventional@react-native-community/eslint-config@release-it/conventional-changelog@svgr/core@types/jest@types/react@types/react-nativecasechalkcommitlinteslinteslint-config-prettiereslint-plugin-prettierfs-extrahuskyjestpod-installprettierreactreact-nativereact-native-builder-bobreact-native-svgrelease-ittypescript
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 @adriano-rodrigues99/phosphor-react-native
or
1npm install --save @adriano-rodrigues99/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 '@adriano-rodrigues99/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};
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.
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 '@adriano-rodrigues99/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 "@adriano-rodrigues99/phosphor-react-native"; 2... 3<Icon.Smiley /> 4<Icon.Folder weight="thin" /> 5<Icon.BatteryHalf size="24px" /> 6<Icon.AirplaneTakeoff size="24px" mirrored={true} />
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.