Icon

Icon, a React Native component for iOS, Android and web: A tinted Feather icon, or your own single-color artwork.

Usage

import { useTheme } from '@leoanimesh/ferrule';
import { Icon } from './components/ui/icon';
import { Stack } from './components/ui/stack';

export default function Example() {
  const { colors } = useTheme();
  return (
    <Stack direction="horizontal" gap={3} align="center">
      <Icon name="map-pin" />
      <Icon name="map-pin" size={28} color={colors.primary} />
      <Icon name="star" size={28} color={colors.warning} label="Rated" />
    </Stack>
  );
}

Props

Prop	Type	Default	Description
`name`	`FeatherName`		A Feather icon, such as `search`. A wrong name fails typecheck. Browse them in the docs.
`source`	`ImageSourcePropType`		Your own artwork instead: a single-color PNG with alpha. Only its shape is used.
`size`	`number`	20
`color`	`string`		Defaults to the theme's text color.
`label`	`string`		What the icon means, when nothing else says it. Without one, screen readers skip it.
`flip`	`boolean`	name ? isDirectional(name) : false	Mirrors in right-to-left. On by default for Feather's arrows, chevrons, corners and log-in and log-out.
`style`	`StyleProp<ImageStyle>`
`testID`	`string`