Icon

Source

Theme Source

The Icon component is a versatile tool for adding Expo Icons to your application. It offers customization options through the use of style props.

Import

import { Icon } from "pearl-ui";

Usage

<Icon iconFamily="AntDesign" iconName="stepforward" />

Icon sizes

The size prop allows you to adjust the size of the icon. You can use the keys available in theme.components.Icon["sizes"], which are "xs", "s", "m", and "l" in the default component configuration.

<Icon iconFamily="AntDesign" iconName="stepforward" size="xs" />
<Icon iconFamily="AntDesign" iconName="stepforward" size="s" />
<Icon iconFamily="AntDesign" iconName="stepforward" size="m" />
<Icon iconFamily="AntDesign" iconName="stepforward" size="l" />

For more precise control over the size of a single Icon instance, you can use the rawSize prop.

<Icon iconFamily="AntDesign" iconName="stepforward" rawSize={43} />

Overriding Styles

The Icon component supports a variety of style props which can be used to override the pre-defined variant style in the theme. Manual style props passed into the component have a higher precedence than the default component configuration.

// passing style prop color="primary.500" overrides the default component config value of color="neutral.900"<Icon  iconFamily="AntDesign"  iconName="stepforward"  size="l"  color="primary.500"  margin="4"/>

Example

Embed not loading? Click here

Accessibility

• Icon has the role of text.
• Icon has the default label set as {iconName} Icon. A custom label can be specified using the accessibilityLabel prop.

Component Properties

Supported Style Properties

The Icon component supports the following style props:

• color and backgroundColor
• margin and padding
• layout
• transform
• opacity and visibility

Animation Properties

The Icon component supports animation properties from the Moti library, enabling the creation of dynamic and interactive UI elements. The useMotiWithStyleProps hook from the Moti library is used to manage these animation properties.

Property	Type	Default	Description
from	object		Defines the starting state of the animation.
to	object		Defines the ending state of the animation.
transition	object		Specifies the type of transition that the animation will use.
exitTransition	object		Determines the transition type that will be used when the component is unmounted. By default, exit uses transition to configure its animations, so this prop is not required. However, if you pass exitTransition, it will override transition for exit animations.
state	object		Manages the overall state of the animation, including the from and to states.
delay	number		Manage the delay for the animate field. (Use the transition prop for more granular control)
onDidAnimate	() => void		Callback function called after finishing an animation.
stylePriority	"state" | "animate"	"animate"	This is not a prop you will likely find yourself using. If set to "animate", then styles passed from the animate prop will take precedent. Otherwise, if set to "state", then the state prop will take precedent for matching styles.
animateInitialState	boolean	false	If true, the from prop will be set to animate. This will be noticeable for some spring animations, and might make them jumpy on mount.

Additional Properties

The Icon component also supports the following additional properties:

Name	Required	Type	Default	Description
size	No	PearlTheme.components.Icon["sizes"]	"m"	Specifies the size of the icon
variant	No	PearlTheme.components.Icon["variants"]		Defines the variant of the icon
rawSize	No	number		Sets the raw size of the icon
iconFamily	Yes	"AntDesign" | "Entypo" | "EvilIcons" | "Feather" | "FontAwesome" | "FontAwesome5" | "Fontisto" | "Foundation" | "Ionicons" | "MaterialCommunityIcons" | "MaterialIcons" | "Octicons" | "SimpleLineIcons" | "Zocial"		Specifies the icon family that contains the desired icon
iconName	Yes	string		Specifies the name of the icon within its icon family
accessibilityLabel	No	string		Sets the accessibility label of the icon