Icon

Component to display icon, it's a wrapper around the Icon component from react-native-vector-icons library.

Import

import { Icon } from "react-native-ficus-ui";

Usage

Examples

EDITABLE EXAMPLE

<HStack spacing={10}>
  <Icon name="accessibility" color="blue.700" size="6xl" iconSet="Ionicons" />
  <Icon
    name="star"
    color="yellow.700"
    size="6xl"
    iconSet="Ionicons"
  />
</HStack>

Sizes

EDITABLE EXAMPLE

<HStack spacing={10}>
  <Icon name="alarm" color="red.500" size="md"  />
  <Icon name="analytics" color="teal.500" size="xl" />
  <Icon name="heart" color="red.500" size="2xl" />
  <Icon name="brush" color="blue.700" size="6xl" />
</HStack>

Back button

EDITABLE EXAMPLE

<Icon
  bg="yellow.400"
  p={15}
  borderRadius="full"
  name="arrow-back"
  color="yellow.700"
  size="2xl"
  iconSet="Ionicons"
  w={50}
/>

Props

Extends every Box

`name`

The name property (`name` style prop in StyleSheet).

Type	Required	Default
string	Yes

`color`

The color property (`color` style prop in StyleSheet).

Type	Required	Default
string	No	gray.800

`size`

The size property.

Type	Required	Default
string, number	No

`iconSet`

The iconSet to use for the Icon

Type	Required	Default
string	No	Ionicons

Divider Skeleton