Icon

Renders an SVG icon — either from the app's icon sprite (by name) or from a custom SVG component (Component).

When to use

Use Icon wherever you need a vector icon. Pass name to render a sprite icon from the app's generated icon set; pass Component to render a one-off custom SVG with the same sizing/aspect-ratio behaviour. Exactly one of the two is required.

There is no @uxf/form twin — Icon is a display primitive.

Usage

import { Icon } from "@uxf/ui/icon";

// sprite icon by name
<Icon name="camera" size={16} />

// tinted via a Tailwind text color
<Icon className="text-primary-600" name="camera" size={12} />

// custom SVG component instead of a sprite icon
<Icon Component={MyGlyph} size={16} />

Props

IconProps accepts exactly one of name / Component (a discriminated union), plus:

Icon forwards its ref to the underlying SVGSVGElement.

Icon name typing

IconName is keyof IconsSet, and IconsSet (exported from @uxf/ui/icon/theme, re-exported from @uxf/ui/icon) is an open interface whose base declaration is a string index signature ([key: string]: true). Each project extends it by module augmentation to enumerate the icons it actually ships — normally generated, alongside the runtime config and sprite, by @uxf/icons-generator into a icons.d.ts:

// icons.d.ts (generated)
declare module "@uxf/ui/icon/theme" {
    interface IconsSet {
        camera: true;
        chevronLeft: true;
        // …
    }
}

Because of the base index signature, name accepts any string at the type level. Validation happens at runtime: if name is not present in the configured iconsConfig, Icon logs a console.warn and renders a fallback question-mark glyph.

Variants & states

Built-in color values (from theme.ts), mapped to the token color layer:

<Icon color="negative" name="camera" size={16} />

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/icon.css");

Sprite (name) rendering reads the sprite path and icon config from UiContextProvider (@uxf/ui/context), so the component must render inside it:

import { UiContextProvider } from "@uxf/ui/context";
import { ICONS } from "./generated/icons";

<UiContextProvider
    value={{
        icon: { iconsConfig: ICONS, spriteFilePath: "/icons-generated/_icon-sprite.svg" },
        // …other context options
    }}
>
    {children}
</UiContextProvider>;

Component-based icons do not need the sprite or icon config.

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Links

• @uxf/icons-generator — generates the icon sprite, runtime config, and IconsSet type augmentation.