Skip to main content

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.

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

If you want more fine-tuned controlled over a single Icon instance, then you can make use of the rawSize prop.

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

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 config.

// 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="xl"/>

Example#

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:

Additional props#

NameRequiredTypeDefaultDescription
sizefalsePearlTheme.components.Icon["sizes"]"m"The size of the icon
variantfalsePearlTheme.components.Icon["variants"]The variant of the icon
iconFamilytrue "AntDesign" | "Entypo" | "EvilIcons" | "Feather" | "FontAwesome" | "FontAwesome5" | "Fontisto" | "Foundation" | "Ionicons" | "MaterialCommunityIcons" | "MaterialIcons" | "Octicons" | "SimpleLineIcons" | "Zocial"Icon family that contains the icon you want to use
iconNametruestringName of the icon as given in it's respective icon family
accessibilityLabelfalsestringThe accessibility label of the icon
rawSizefalsenumberThe size of the icon to override the component style size.

Default Component Config#

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",  },};