Icon base v0.4.0 · @behivetech

The shared builder and stylesheet for every @behivetech/icons.* package: createIcon, the factory each icon package builds its component with, and the stylesheet that sizes them. It holds no glyphs; each one is its own package, @behivetech/icons.<name>, so an app loads only the icons it renders.

Usage

1import { CheckIcon } from '@behivetech/icons.check';
2import '@behivetech/icons.base/styles.css';
3
4<CheckIcon />
5<CheckIcon size="lg" titleAccess="Done" />

Import the stylesheet once in the app. Icons use stroke="currentColor", so they take the colour of the text around them, and size through size (sm, md, lg, xl).

Accessibility

An icon is decorative by default: aria-hidden="true" and focusable="false". Name it with titleAccess (rendered as the svg's <title>) or aria-label/aria-labelledby and it becomes an image (role="img"). ref goes to the root svg, and any svg attribute passed overrides the defaults (strokeWidth, viewBox).

Making an icon

Run pnpm gen icon <scope> <name> <svg> <visibility> with the glyph's markup (or the path of an .svg file): it writes the package with its example and spec, and refreshes @behivetech/icons.all, the name-keyed Icon for the places where the name is data. The markup may hold geometry only (paths, shapes, groups, gradients and clip paths); script, style, { } expressions, namespaced names and links that leave the svg are refused.

Examples

Open all 2 →

Icon Sizes

1const SquareIcon = createIcon(
2  "SquareIcon",
3  <rect x="4" y="4" width="16" height="16" rx="2" />,
4);
5
6const IconSizes = () => (
7  <>
8    <SquareIcon size="sm" />
9    <SquareIcon />
10    <SquareIcon size="lg" />
11    <SquareIcon size="xl" />
12  </>
13);
14
15render(<IconSizes />);

Named Icon

1const SquareIcon = createIcon(
2  "SquareIcon",
3  <rect x="4" y="4" width="16" height="16" rx="2" />,
4);
5
6const NamedIcon = () => <SquareIcon titleAccess="Square" />;
7
8render(<NamedIcon />);

Functions

`createIcon` function

Builds an icon component from its glyph geometry, the way MUI's `createSvgIcon` does. Each icon package (`@scope/icons.<name>`) calls this once, and lists this package as a dependency (`workspace:^`), so an app has one factory and one stylesheet however many icons it uses. Mark each call `PURE` (a `#__PURE__` comment) so a bundler can drop an icon nothing uses.

createIcon(displayName: string, children: ReactNode): IconComponent

Parameter	Type	Default	Description
`displayName`	`string`	—	The component's name in devtools, e.g. `CheckIcon`
`children`	`ReactNode`	—	The svg's geometry: one element or a fragment of them, on a 24 by 24 grid