All icons

1// Written by `pnpm gen icon`: one line per icon package. Do not edit.
2import { ArrowLeftIcon } from "@behivetech/icons.arrow-left";
3import { ArrowRightIcon } from "@behivetech/icons.arrow-right";
4import { BoldIcon } from "@behivetech/icons.bold";
5import { BoxIcon } from "@behivetech/icons.box";
6import { CampBorderIcon } from "@behivetech/icons.camp-border";
7import { CarIcon } from "@behivetech/icons.car";
8import { CartIcon } from "@behivetech/icons.cart";
9import { CheckIcon } from "@behivetech/icons.check";
10import { ChevronDownIcon } from "@behivetech/icons.chevron-down";
11import { ChevronUpIcon } from "@behivetech/icons.chevron-up";
12import { ClockIcon } from "@behivetech/icons.clock";
13import { CloseIcon } from "@behivetech/icons.close";
14import { CursorIcon } from "@behivetech/icons.cursor";
15import { EllipseIcon } from "@behivetech/icons.ellipse";
16import { ExternalLinkIcon } from "@behivetech/icons.external-link";
17import { FileTextIcon } from "@behivetech/icons.file-text";
18import { FlameIcon } from "@behivetech/icons.flame";
19import { ImageIcon } from "@behivetech/icons.image";
20import { InfoIcon } from "@behivetech/icons.info";
21import { ItalicIcon } from "@behivetech/icons.italic";
22import { KeyIcon } from "@behivetech/icons.key";
23import { LabelIcon } from "@behivetech/icons.label";
24import { LinkIcon } from "@behivetech/icons.link";
25import { ListIcon } from "@behivetech/icons.list";
26import { ListOrderedIcon } from "@behivetech/icons.list-ordered";
27import { MenuIcon } from "@behivetech/icons.menu";
28import { PencilIcon } from "@behivetech/icons.pencil";
29import { PolygonIcon } from "@behivetech/icons.polygon";
30import { PrinterIcon } from "@behivetech/icons.printer";
31import { QuoteIcon } from "@behivetech/icons.quote";
32import { RectangleIcon } from "@behivetech/icons.rectangle";
33import { RestroomIcon } from "@behivetech/icons.restroom";
34import { RoadIcon } from "@behivetech/icons.road";
35import { StructureIcon } from "@behivetech/icons.structure";
36import { ThermometerIcon } from "@behivetech/icons.thermometer";
37import { TrashIcon } from "@behivetech/icons.trash";
38import { UploadIcon } from "@behivetech/icons.upload";
39import { WavesIcon } from "@behivetech/icons.waves";
40import { WifiIcon } from "@behivetech/icons.wifi";
41
42/** Every icon, keyed by the name of its package (`@scope/icons.<name>`). */
43export const iconRegistry = {
44  "arrow-left": ArrowLeftIcon,
45  "arrow-right": ArrowRightIcon,
46  bold: BoldIcon,
47  box: BoxIcon,
48  "camp-border": CampBorderIcon,
49  car: CarIcon,
50  cart: CartIcon,
51  check: CheckIcon,
52  "chevron-down": ChevronDownIcon,
53  "chevron-up": ChevronUpIcon,
54  clock: ClockIcon,
55  close: CloseIcon,
56  cursor: CursorIcon,
57  ellipse: EllipseIcon,
58  "external-link": ExternalLinkIcon,
59  "file-text": FileTextIcon,
60  flame: FlameIcon,
61  image: ImageIcon,
62  info: InfoIcon,
63  italic: ItalicIcon,
64  key: KeyIcon,
65  label: LabelIcon,
66  link: LinkIcon,
67  list: ListIcon,
68  "list-ordered": ListOrderedIcon,
69  menu: MenuIcon,
70  pencil: PencilIcon,
71  polygon: PolygonIcon,
72  printer: PrinterIcon,
73  quote: QuoteIcon,
74  rectangle: RectangleIcon,
75  restroom: RestroomIcon,
76  road: RoadIcon,
77  structure: StructureIcon,
78  thermometer: ThermometerIcon,
79  trash: TrashIcon,
80  upload: UploadIcon,
81  waves: WavesIcon,
82  wifi: WifiIcon,
83} as const;

1import type { IconBaseProps } from "@behivetech/icons.base";
2import { iconRegistry } from "./icon-registry.js";
3
4/** The name of an icon package, without `@behivetech/icons.`. */
5export type IconName = keyof typeof iconRegistry;
6
7/** Every name `Icon` takes, in the order of the icon packages. */
8export const iconNames = Object.keys(iconRegistry) as IconName[];
9
10export interface IconProps extends IconBaseProps {
11  /** Which icon to render */
12  name: IconName;
13}
14
15/**
16 * Renders any icon by name.
17 *
18 * Convenient when the icon is chosen at runtime, but the lookup is dynamic, so
19 * every glyph is loaded. Import the icon you want where its name is known when
20 * you write the code.
21 */
22export const Icon = ({ name, ...rest }: IconProps) => {
23  const Glyph = iconRegistry[name];
24
25  return <Glyph {...rest} />;
26};

1export { Icon, iconNames } from "./icon.js";
2export type { IconName, IconProps } from "./icon.js";

1import { Icon, iconNames } from "./icon.js";
2
3/** Every icon, chosen by name: the list is whatever icon packages exist. */
4export const EveryIconByName = () => (
5  <>
6    {iconNames.map((name) => (
7      <Icon key={name} name={name} />
8    ))}
9  </>
10);
11
12/** An icon chosen by name, at two sizes. */
13export const IconByName = () => (
14  <>
15    <Icon name="trash" />
16    <Icon name="trash" size="lg" />
17  </>
18);

1import { render } from "@testing-library/react";
2import { Icon } from "./icon.js";
3import { iconRegistry } from "./icon-registry.js";
4
5describe("Icon", () => {
6  it("renders the glyph its name picks", () => {
7    const { container } = render(<Icon name="trash" />);
8
9    expect(container.querySelector("svg")).not.toBeNull();
10  });
11
12  it("knows every icon package by its name", () => {
13    Object.values(iconRegistry).forEach((Glyph) => {
14      expect(Glyph.displayName).toMatch(/Icon$/);
15    });
16  });
17});