Icon

Icon shows an icon from the Luke UI set. It takes the colour of the text around it.

See Iconography for available icons, sizing, colour, and setup.

import { Icon } from '@luke-ui/react/icon';

export default () => {
	return <Icon name="search" />;
};

Custom icons

Use createIcon for a one-off icon that is not in the set, such as a brand mark. It returns an SVG component with the same sizing and accessibility behaviour as Icon, including the size a control or --luke-icon-size sets.

import { createIcon } from '@luke-ui/react/icon';

const HeartIcon = createIcon({
	path: (
		<path d="M12 21a1 1 0 0 1-.7-.3L5 14.5a5 5 0 1 1 7-6 5 5 0 1 1 7 6l-6.3 6.2a1 1 0 0 1-.7.3Z" />
	),
});

export default () => {
	return <HeartIcon size="small" title="Add to favourites" />;
};

To size an <svg> you render yourself, such as one from another icon library, pass iconRecipe() as its className. Then hide it with aria-hidden or name it with role="img" and aria-label yourself.

Accessibility

Pass title when an icon conveys meaning without adjacent text, such as a standalone status icon. Icon then exposes it to assistive technology with role="img". When title is omitted, the icon is decorative.

Read Iconography for decorative and informative examples.

API

IconProps

CreateIconOptions

CustomIconProps