Icons
Yoga provide a package called @gympass/yoga-icons that contains icons to be
used at your application.
Installation
yarn add @gympass/yoga-icons
Usage
Individual
Icon components receive all the available svg tag attributes.
import { Star } from '@gympass/yoga-icons';
<Star stroke="#ffc24c" width={26} height={26} />
Group
You can use icon groups: FlagsIcons and UIIcons. You can also use an icon specific of these groups.
Remembering that icon groups are objects you can work with.
import { UIIcons, FlagsIcons } from '@gympass/yoga-icons';
import { Box } from '@gympass/yoga';
<Box d="flex" flexDirection="column" alignItems="center" gap="small">
<UIIcons.Favorite fill="#d8385e" width={26} height={26} />
<FlagsIcons.FlagBrazil width={26} height={26} />
<Box d="flex" gap="small" flexWrap="wrap">
{Object.entries(FlagsIcons).map(([name, Component]) => (
<Component width={26} height={26} key={name} />
))}
</Box>
</Box>
Flags Icons
FlagTurksAndCaicosIslands
UI Icons
FootwearSneakers
MapBase
PaddleBoard
RenewableEnergyBatteryLeaf
SingleWomanFlag
WaterBottle
YogaMat