Icon

The Icon component is used to render icons. CxJS includes only a few built-in icons; additional icon sets need to be registered.

<div className="flex items-center gap-4">
  <Icon name="calendar" />
  <Icon name="calculator" className="text-blue-500" />
  <Icon name="bug" className="bg-yellow-200" />
  <Icon name="pencil" />
</div>

Preregistered Icons

CxJS includes the following built-in icons: calendar, check, clear, close, cx, drop-down, file, folder, folder-open, forward, loading, menu, pixel-picker, search, sort-asc, and square.

To unregister icons (e.g., to replace them with custom versions):

Icon.unregister("search", "calendar");

Registering Icons

Individual icons can be registered using Icon.register:

Icon.register("custom-icon", ({ key, ...props }) => (
  <svg key={key} {...props}>
    ...
  </svg>
));

FontAwesome

FontAwesome icons can be registered using Icon.registerFactory:

Icon.registerFactory((name, { key, className, ...props }) => {
  return (
    <i key={key} className={`fa fa-${name} ${className || ""}`} {...props} />
  );
});

Lucide

Lucide icons need to be registered individually:

import { VDOM } from "cx/ui";
import { Icon } from "cx/widgets";
import type { IconNode } from "lucide";
import { Search, Plus, Pencil } from "lucide";

function getRenderer(iconNode: IconNode) {
  return ({ key, ...rest }: Record<string, any>) => (
    <svg
      key={key}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      {...rest}
    >
      {iconNode.map(([tag, attrs], i) =>
        VDOM.createElement(tag, { key: i, ...attrs }),
      )}
    </svg>
  );
}

Icon.register("search", getRenderer(Search));
Icon.register("plus", getRenderer(Plus));
Icon.register("pencil", getRenderer(Pencil));

Configuration