Icon
An icon is a symbol representing a command, device, directory, or common action.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Icon } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | The glyph, as an svg. It inherits the current colour, so it takes the colour of whatever it sits in. |
| size | 'small' | 'medium' | 'large' | 'medium' | Match it to the text beside it. Medium sits with body text. |
| label | string | — | Give this only when the icon stands alone and carries meaning. Beside a visible label, leave it out so the meaning is not read twice. |
Accessibility
What the component does for you, and what it needs from you.
- An icon beside a visible label is decorative and is hidden, so the label is not announced twice.
- An icon standing alone needs a label, and the label should say the meaning rather than the picture. Resolved, not Tick.
- The glyph inherits the current colour, so contrast follows the text around it rather than being set separately.