Icon

Icon renders a symbol from the generated Luke UI spritesheet. It needs an IconSpritesheetProvider ancestor so it can resolve the spritesheet URL.

Set up the spritesheet

Wrap your app with IconSpritesheetProvider. Pass the URL of the generated spritesheet asset.

• Source asset: @luke-ui/react/spritesheet.svg, exported from ./dist/spritesheet.svg
• Runtime lookup: <configured-sprite-href>#<icon-name>

<IconSpritesheetProvider href="/assets/spritesheet.svg">
	<App />
</IconSpritesheetProvider>

Vite and Storybook should import the spritesheet as a URL.

import spriteSheetHref from '@luke-ui/react/spritesheet.svg?url&no-inline';

<IconSpritesheetProvider href={spriteSheetHref}>
	<App />
</IconSpritesheetProvider>;

The no-inline query avoids data: URLs, which can break <use href="...#icon-id"> rendering.

When developing @luke-ui/react, generate the spritesheet from packages/@luke-ui/react/icons/*.svg.

pnpm --dir packages/@luke-ui/react run generate:icons

Use an icon

Icon renders an <svg> that references a symbol in the generated spritesheet with <use href="..." />. name is restricted to the generated icon set. Use size to choose xsmall, small, medium, or large.

• name chooses the symbol id.
• The sprite URL comes from IconSpritesheetProvider.
• viewBox defaults to the generated icon viewBox.
• Icon fill follows currentColor.

<Icon name="add" className="myIcon" style={{ color: 'tomato' }} />

Create a custom icon

Use createIcon for a one-off icon that is not in the generated spritesheet. It returns a component with the same sizing and accessibility behaviour as Icon.

Accessibility

Pass title when an icon conveys meaning without adjacent text, such as a standalone status icon. The icon is then exposed to assistive technology with role="img".

When title is omitted, aria-hidden defaults to true. Do not pass both aria-hidden and title because a titled icon should not be hidden from assistive technology.

Related components

Use Emoji when the visual content is an emoji that needs an accessible label.