Every icon behind one `Icon` component chosen by name, for the places where the name is data (a toolbar built from config). It depends on every icon package, so importing it loads the whole set.
Every icon behind one Icon component chosen by name, for the places where the name is data (a toolbar built from config). It depends on every icon package, so importing it loads the whole set.
Usage
1import { Icon } from '@behivetech/icons.all';23<Icon name="trash" />4<Icon name="close" size="sm" />
Where the icon is known when you write the code, import that icon's own package (@behivetech/icons.trash) and load one glyph instead of the set. Its names are those of the icon packages; the list is refreshed whenever pnpm gen icon adds one.
Examples
Open all 2 →Every Icon By Name
1const EveryIconByName = () => (2 <>3 {iconNames.map((name) => (4 <Icon key={name} name={name} />5 ))}6 </>7);89render(<EveryIconByName />);
Icon By Name
1const IconByName = () => (2 <>3 <Icon name="trash" />4 <Icon name="trash" size="lg" />5 </>6);78render(<IconByName />);
Properties
Icon props
| Prop | Type | Default | Description |
|---|---|---|---|
name* | enum | — | Which icon to render |
className | string | — | Additional class names to merge with the component root element |
ref | Ref<SVGSVGElement> | — | Ref to the root svg element |
size | "sm" | "md" | "lg" | "xl" | — | Controls width/height; defaults to md |
titleAccess | string | — | Accessible name of the icon, rendered as the svg's `<title>`. When set the icon is exposed as an image with this name; without it (and without `aria-label` or `aria-labelledby`) the icon is decorative and hidden from assistive technology. Pass an already translated string. |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).