Icon

Usage

import { Icon, SvgSmile } from '@loomhq/lens'
<Icon icon={<SvgSmile />} />

Icon

See the Icon set.

Color

Use one of the palette colors.

<Icon color='orange' icon={<SvgLink />} />

Size

The default size is 3×3 units (1.5rem × 1.5rem), To change it use the size prop, the value can be specified in units, pixels or any valid css unit.

<Arrange>
  <Icon size={12} icon={<SvgArrowForward />} />
  <Icon size='3rem' icon={<SvgArrowForward />} />
  <Icon icon={<SvgArrowForward />} />
</Arrange>

With alternative text

If the icon is not purely decorative, add an image text alternative for accessibility reasons.

<Icon altText="Favorite" icon={<SvgSmile />} />

Props