Image
An image component that can switch between light and dark themes.
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 { Image } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| src * | string | — | The image source. |
| alt * | string | — | What the image says. An empty string is the correct answer for a decorative image, and is different from leaving it out. |
| width | number | — | The intrinsic width. Give it with height so the layout does not jump when the image loads. |
| height | number | — | The intrinsic height. Give it with width for the same reason. |
Accessibility
What the component does for you, and what it needs from you.
- Alt text is required by the component precisely because it is the part most often forgotten.
- An empty alt is a deliberate statement that the image is decorative, and is correct. A missing alt is not.
- Giving width and height prevents the page reflowing on load, which matters most to anyone using magnification.