Icon

Overview

import React from 'react';
import { Icon } from 'telus-thorium-enriched';

const MyComponent = (props => <Icon name='spyglass' />);

Property	Type	Default	Description
glyph	`string`	required	Name of an icon glyph
variant	`string`	`undefined`	Colour variant, e.g. primary, secondary
fixedWidth	`bool`	`false`	Display icon with a preset width

See the Utility Icons page for more details about glyph names, variants, and other icon traits._

Usage

Plain icon:

<Icon glyph='spyglass' />

Icons with color variants:

<Icon glyph='spyglass' />
<Icon glyph='spyglass' variant='primary' />
<Icon glyph='spyglass' variant='secondary' />
<Icon glyph='spyglass' variant='disabled' />
<Icon glyph='spyglass' variant='error' />

Fixed Width Icons

Hello
Lorem
Ipsum

<Icon glyph='spyglass' fixedWidth />
<Icon glyph='chevron' variant='primary' fixedWidth />
<Icon glyph='chevron' variant='secondary' fixedWidth />

Accessibility

Any extra props on an Icon component will be passed to the underlying DOM node. You can use the same techniques as normal HTML to make Icons accessible:

<Icon glyph='plus' title='Expand section' role='button' aria-pressed='false' />

Icons also accept children, if you’d like to add screen-readable content:

<Icon glyph='plus'>
  <span className='accessible-hide'>button to add more</span>
</Icon>