Icon

It's an extension and accumulation of the react-native-vector-icons library along with all it's family group support.

Usage



function IconUsage() {
  return (
    <View>
      <Icon name="add" size={24} />
    </View>
  )
}

Status













function IconStatuses() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Icon status="primary" name="add" size={24} />
      <Icon status="accent" name="add" size={24} />
      <Icon status="success" name="add" size={24} />
      <Icon status="info" name="add" size={24} />
      <Icon status="warning" name="add" size={24} />
      <Icon status="error" name="add" size={24} />
    </View>
  )
}

Size







function IconSizes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Icon name="add" size={24} />
      <Icon name="add" size={48} />
      <Icon name="add" size={100} />
    </View>
  )
}

Family

󱑤



󰋜

function IconFamily() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Icon family="MaterialCommunityIcons" name="download-circle" size={48} />
      <Icon family="Ionicons" name="add" size={48} />
      <Icon family="MaterialCommunityIcons" name="home" size={48} />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	TextProps$1	--	Inherits properties from TextProps$1
family	IconFamily	Ionicons	Vector icons family from vector-icons set
size	number	12	Size of the icon, can also be passed as fontSize in the style object.
name	string	--	Name of the icon to show
color	number | ColorValue	--	Set custom icon color