@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIIcon

    Inline SVG icon component.

    Renders SVG inner content (paths, circles, etc.) inside a properly configured <svg> wrapper. The icon inherits the current text colour via currentColor.

    The library ships a categorised registry of Lucide icons (UIIcons.Lucide.*), but you can also supply your own custom SVG content — any valid SVG inner markup will work.

    The Lucide icon set is created by the Lucide Contributors, originally forked from Feather Icons by Cole Bemis, and is licensed under the ISC Licence.

    <ui-icon [svg]="UIIcons.Lucide.Text.Bold" />
    <ui-icon [svg]="UIIcons.Lucide.Arrows.ArrowUp" [size]="20" />
    <ui-icon [svg]="UIIcons.Lucide.Arrows.ChevronDown" size="16" ariaLabel="Expand" />

    The svg input accepts any string of SVG inner markup — the component wraps it in an <svg> element with viewBox="0 0 24 24", stroke="currentColor", fill="none", stroke-width="2", stroke-linecap="round", and stroke-linejoin="round". Design your icons on a 24 × 24 grid using stroked paths to match the built-in set.

    // app-icons.ts
    export const AppIcons = {
      Diamond: `<path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41
        2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41
        2.41 0 0 0-3.41 0Z" />`,
      Spark: `<path d="M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5
        10l5.5-1.5Z" />`,
    } as const;

    import { UIIcon } from '@theredhead/lucid-kit';
    import { AppIcons } from './app-icons';

    @Component({
      imports: [UIIcon],
      template: `<ui-icon [svg]="diamond" [size]="24" ariaLabel="Diamond" />`,
    })
    export class MyComponent {
      readonly diamond = AppIcons.Diamond;
    }
    • Grid: Use a 24 × 24 coordinate space (matching the viewBox).
    • Stroke-based: The wrapper sets fill="none" and stroke="currentColor". For filled icons, add fill="currentColor" and stroke="none" directly on your <path> or <circle>.
    • Colour: Icons inherit the parent element's CSS color via currentColor. Override with a CSS rule on ui-icon if needed.
    • Organisation: Group related custom icons in a const object (like UIIcons.Lucide) for discoverability and tree-shaking.
    Index

    Constructors

    constructor

    Properties

    ariaLabel size svg

    Constructors

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label. When provided, aria-hidden is removed.

    size: InputSignal<number> = ...

    Icon size in pixels (width & height). Defaults to 24.

    svg: InputSignal<string> = ...

    SVG inner content — the markup inside the <svg> element (paths, circles, lines, etc.).

    Use values from the built-in UIIcons registry or supply your own custom SVG markup. The content is rendered inside an <svg> wrapper with viewBox="0 0 24 24", so design custom icons on a 24 × 24 grid.

    // Built-in icon
    readonly icon = UIIcons.Lucide.Text.Bold;

    // Custom icon — raw SVG path string
    readonly customIcon = '<circle cx="12" cy="12" r="10" /><path d="M12 8v8" />';

    Settings

    Member Visibility

    On This Page

    Using built-in iconsExtending with custom icons
    Constructors
    Properties