Icon

The Icon works as a wrapper for our icons abstracting color, size and stroke usage, which are all received as strings representing a spacing token name.

Reference

Refer to Icons to check already existing icons which can be used in conjunction with this component.
Refer to spacing tokens to check possible string values for both width and height dimensions.
Refer to colors tokens to check possible string values for both fill and stroke properties.

Web
Native

Basic usage

import { Accessibility } from '@gympass/yoga-icons';
import { Icon } from '@gympass/yoga';

<Icon as={Accessibility} /><Icon as={Accessibility} />

Usage with custom size, fill and stroke

import { Icon } from '@gympass/yoga';
import { AlertCircle, Home } from '@gympass/yoga-icons';

<>
  <Icon
    as={AlertCircle}
    width="medium"
    height="medium"
    fill="energy"
  />
  <Icon as={Home} size="medium" fill="hope" />
</><>
  <Icon
    as={AlertCircle}
    width="medium"
    height="medium"
    fill="energy"
  />
  <Icon as={Home} size="medium" fill="hope" />
</>

Usage with system props

import { AlertCircle, Home } from '@gympass/yoga-icons';
import { Icon } from '@gympass/yoga';

<>
  <Icon
    as={AlertCircle}
    size="medium" 
    margin="medium"
    fill="energy"
  />
  <Icon as={Home} size="medium" fill="hope" />
</><>
  <Icon
    as={AlertCircle}
    size="medium" 
    margin="medium"
    fill="energy"
  />
  <Icon as={Home} size="medium" fill="hope" />
</>

Props

The Icon component also has support for system props as you can see more details our system

Prop	Description	Type	Default	Required