Luke UI Docs

SVG icon component backed by the generated spritesheet.

View in Storybook View as Markdown Edit on GitHub

Icon renders a symbol from the Luke UI spritesheet. It requires an IconSpritesheetProvider ancestor. See Setup below.

Icon — Basic

Open in playground

Best practices

Guidance	Practices
Do	Pass `title` when the icon conveys meaning without adjacent text, such as a standalone status icon.
Don't	Pass both `aria-hidden` and `title`. A titled icon should be exposed to assistive technology, not hidden.

Setup

Wrap your app with IconSpritesheetProvider.

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 icons from packages/@luke-ui/react/icons/*.svg into packages/@luke-ui/react/dist/spritesheet.svg.

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

How it works

Icon renders an <svg> that references a symbol in the generated spritesheet with <use href="..." />.

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 your own icon

Use createIcon for a one-off icon that is not in the generated spritesheet.

Icon — Custom

Open in playground

Accessibility

If title is provided, the icon is exposed to assistive technology with role="img". If title is omitted, aria-hidden defaults to true.

Props

Prop

Type