Skip to main content

Icon

Ignite's Icon and PressableIcon Components render an icon using predefined icon images. You can use those, override them, or customize this component to create any number of image based icons. PressableIcon will wrap the icon in a TouchableOpacity component, Icon will use a View component.

icon-component

<PressableIcon icon="ladybug" onPress={() => Alert.alert("Hello")} />
<Icon icon="debug" />

Props​

Other than these props, you can pass any props that TouchableOpacity or View support and they will be forwarded to the respective wrapper component.

icon​

The icon prop is required. This is the string name of the icon to be rendered. The options are:

  • back
  • bell
  • caretLeft
  • caretRight
  • check
  • community
  • components
  • debug
  • heart
  • hidden
  • ladybug
  • lock
  • menu
  • more
  • pin
  • settings
  • view
  • x
<Icon icon="bell" />

You can easily change or add custom icons to the Icon component.

color​

The color optional prop is a string that will be used to set the tintColor of the icon image.

<Icon icon="x" color="#7C7C7C">

size​

The size optional prop is a number that is used to set the dimensions of the icon image.

<Icon icon="x" size={24} />

style​

The style prop is optional. This is an object that overrides the default style of the icon, and is of the type StyleProp<ImageStyle>. By default this just sets the image's resizeMode to contain. See React Native docs on ImageStyle for more information.

<Icon icon="ladybug" style={{ width: 20, height: 20 }} />

containerStyle​

The containerStyle is an optional prop that sets the style of the icon container (either a TouchableOpacity or View), and is of the type StyleProp<ViewStyle>. See React Native docs on ViewStyle for more information.

<Icon icon="bug" containerStyle={{ backgroundColor: "red" }} />

onPress​

The onPress prop can be passed to a PressableIcon Component, which will forward it to the wrapped TouchableOpacitys onPress prop.

<PressableIcon icon="ladybug" onPress={() => Alert.alert("Hello")} />

Custom Icons​

To create your own custom icon, add your icon image(s) to the assets/icons/ directory and then add it with its own name to the iconRegistry object in app/components/Icon.tsx.

-- icon/
  -- icons/
    -- index.ts
    -- my-custom-icon.png
export const iconRegistry = {
  // ...
  custom: require("./myCustomIcon.png"),
}

You can then use your custom icon by passing its name through the icon prop.

<Icon icon="custom" />
<PressableIcon icon="custom" onPress={() => Alert.alert("I'm a custom PressableIcon!")} />