Icon

The Icon component can used to add Expo Icons to your app and customize them using style props.

Import

import { Icon } from "pearl-ui";

Usage

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

Icon sizes

Use the size prop to change the size of icon. You can set the value to the keys available in theme.components.Icon["sizes"], which are "s", "m", "l", and "xl" in the default theme.

// size="l" refers to the value of `theme.components.Icon["sizes"]["l"]`<Icon iconFamily="AntDesign" iconName="stepforward" size="l" />

Override Style

The Icon component also 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 precedance than the default component style.

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

Example

Light

Embed not loading? Click here

Dark

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.

Props

Supported style props

The Icon component supports the following style props:

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

Additional props

Name	Required	Type	Default	Description
iconFamily	true	"AntDesign" | "Entypo" | "EvilIcons" | "Feather" | "FontAwesome" | "FontAwesome5" | "Fontisto" | "Foundation" | "Ionicons" | "MaterialCommunityIcons" | "MaterialIcons" | "Octicons" | "SimpleLineIcons" | "Zocial"		Icon family that contains the icon you want to use
iconName	true	string		Name of the icon as given in it's respective icon family
size	false	PearlTheme.components.Icon["sizes"]	"m"	The size of the icon
variant	false	PearlTheme.components.Icon["variants"]		The variant of the icon
accessibilityLabel	false	string		The accessibility label of the icon

Default Component Style

export default {  baseStyle: {    color: {      light: "neutral.900",      dark: "neutral.50",    },  },  sizes: {    s: {      size: 10,    },    m: {      size: 15,    },    l: {      size: 20,    },    xl: {      size: 30,    },  },  defaults: {    size: "m",  },};