Icon
An icon is a symbol representing a command, device, directory, or common action.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 | None | The glyph, as an svg. It uses the current text colour of its container. |
| size | 'small' | 'medium' | 'large' | 'medium' | Match it to the text beside it. Use medium with body text. |
| label | string | None | Add this only when the icon is on its own and has meaning. Next to a visible label, leave it out so screen readers do not read it twice. |
Accessibility
What the component does for you, and what it needs from you.
- An icon next to a visible label is decorative and hidden from screen readers, so the label is not announced twice.
- An icon on its own needs a label. The label should describe the meaning, not the picture. Resolved, not Tick.
- The glyph uses the current text colour, so its contrast matches the text around it.