Icon

A component to render icons.

A set of pre-defined Casper UI-specific icon components. Each icon is a React component that can be imported and used directly. The icon set is defined in and exported from the Casper UI Figma Icons-document (Caspeco-authentication required for access).

Component usage

Icon components support all base style props. Control the size with size and color with color.

import { ThemeColor, ThemeIconSize, UserIcon } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <UserIcon color={ThemeColor.Accent} size={ThemeIconSize.X2Large} />;
}

Sizes

Available sizes are defined in the ThemeIconSize enum. The size property also supports responsive styles.

import { ThemeIconSize, UserIcon } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <>
      <UserIcon size={ThemeIconSize.XSmall} />
      <UserIcon size={ThemeIconSize.Small} />
      <UserIcon size={ThemeIconSize.Medium} />
      <UserIcon size={ThemeIconSize.Large} />
      <UserIcon size={ThemeIconSize.XLarge} />
      <UserIcon size={ThemeIconSize.X2Large} />
      <UserIcon size={ThemeIconSize.X3Large} />
    </>
  );
}

All icons

import * as Icons from "@caspeco/casper-ui-library";
import { ThemeIconSize, type CasperIconComponent } from "@caspeco/casper-ui-library";

export default function Demo() {
  // Get all icon components (those ending with "Icon")
  const iconEntries = Object.entries(Icons).filter(
    ([name]) => name.endsWith("Icon") && name !== "createCasperIcon",
  );

  return (
    <div style={{ display: "flex", flexWrap: "wrap" }}>
      {iconEntries.map(([name, IconComponent]) => {
        const Icon = IconComponent as CasperIconComponent;
        return (
          <div
            key={name}
            style={{
              width: "200px",
              margin: "2px",
              display: "flex",
              alignItems: "center",
            }}
          >
            <Icon size={ThemeIconSize.Large} />
            {name}
          </div>
        );
      })}
    </div>
  );
}