PHIconWrapper

Wrapper for Phosphor Icons web components with FontAwesome-compatible API This shows a loading state (skeleton loader) until the icon web component is ready, then renders the actual icon.

Parent app must load Phosphor Icons web components via CDN:

<script type="module" src="https://unpkg.com/@phosphor-icons/[email protected]"></script>

Installation

import { PHIconWrapper } from 'uxp/components';

Signature

const PHIconWrapper: React.FunctionComponent<PHIconWrapperProps>

Examples

tsx
// Simple usage with default regular weight
<PHIconWrapper icon="house" />

tsx
// With weight prefix and FontAwesome-style size
<PHIconWrapper icon={['phb', 'house']} size="2x" color="blue" />

tsx
// With animations
<PHIconWrapper icon={['phf', 'heart']} spin color="red" size="lg" />

tsx
// With flip and rotation
<PHIconWrapper icon="arrow-right" flip="horizontal" rotation={90} />

Properties

Name	Type	Mandatory	Default Value	Example Value
icon	PHIconProp	Yes	-	'house'
size	SizeProp | number | string	No	-	"lg"
color	string	No	-	"red"
className	string	No	-	-
style	CSSProperties	No	-	-
flip	FlipProp	No	-	-
rotation	RotateProp	No	-	-
spin	boolean	No	-	-
pulse	boolean	No	-	-
beat	boolean	No	-	-
bounce	boolean	No	-	-
shake	boolean	No	-	-
fade	boolean	No	-	-
border	boolean	No	-	-
fixedWidth	boolean	No	-	-
skeletonLoader	SkeletonLoaderProps	No	-	-

Related Types

• PHIconWrapperProps

• PHIconProp

• PHIconPrefix

• SkeletonLoaderProps