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 />} />
Width offset
Use hasWidthOffset to offset the extra white space created by the icon boundary.
<>
<Text>Without offset — icon has extra white space</Text>
<Spacer bottom="xsmall" />
<DemoBox boxType="outline">
<Arrange gap="small">
<DemoBox>
<Icon icon={<SvgBell />} />
</DemoBox>
<DemoBox>
{demoText.title}
</DemoBox>
</Arrange>
</DemoBox>
<Spacer bottom="medium"/>
<Text>With offset — extra white space is compensated</Text>
<Spacer bottom="xsmall" />
<DemoBox boxType="outline">
<Arrange gap="small">
<DemoBox>
<Icon hasWidthOffset icon={<SvgBell />} />
</DemoBox>
<DemoBox>
{demoText.title}
</DemoBox>
</Arrange>
</DemoBox>
</>
Props