Icon

Renders an SVG from a consumer-supplied icon map. wire-ui ships no SVG assets — you bring your own.

Features

Renders consumer-supplied SVG strings by name.

Ships no SVG assets — you bring your own icon map.

Accessible with optional label for role=“img”.

Size variants via data-size attribute.

Example

Anatomy


import { Icon } from '@wire-ui/react'
 
const icons = {
'caret-down': '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>',
'warning': '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>',
'x': '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" /></svg>',
}
 
<Icon type="caret-down" icons={icons} size="medium" />
<Icon type="warning" icons={icons} size="medium" />
<Icon type="x" icons={icons} size="medium" />

Props

Prop	Type	Default	Description
`type`	`string`	required	Key into `icons` map
`icons`	`Record<string, string>`	required	Map of name → SVG string
`size`	`Size`	`'medium'`	Sets `data-size`
`label`	`string`	—	If provided: `role="img"` + `aria-label`; otherwise `aria-hidden="true"`
`className`	`string`	—	Applied to the wrapper element

Size values

Use data-size to set dimensions:


[data-size="small"] {
	width: 1rem;
	height: 1rem;
}
[data-size="medium"] {
	width: 1.25rem;
	height: 1.25rem;
}
[data-size="large"] {
	width: 1.5rem;
	height: 1.5rem;
}

Typical icon map setup


// icons.ts
export const icons = {
	"caret-down": '<svg viewBox="0 0 20 20">...</svg>',
	warning: '<svg viewBox="0 0 24 24">...</svg>',
	x: '<svg viewBox="0 0 20 20">...</svg>',
};

Pass the map once from a parent or via context to avoid prop-drilling:


// Use a wrapper component in your design system
import { Icon as BareIcon } from "@wire-ui/react";
import { icons } from "./icons";
 
export function Icon(
	props: Omit<React.ComponentProps<typeof BareIcon>, "icons">,
) {
	return <BareIcon icons={icons} {...props} />;
}