kjol/web/kit/Icons.tsx

import { JSXElement } from "solid-js";
import { FA_ICONS } from "@appgen/faIcons";

interface CustomIconDef {
    viewBox: [number, number];
    content: string;
}

interface IconProps {
    icon: string;
    size?: number | [number, number];
    class?: string;
    prefix?: string;
    // Per-icon style override: `true` forces solid (fas), `false` forces
    // regular (far); when omitted, follows the app-wide FA_DEFAULT_SOLID switch.
    // Solid falls back to regular when a solid variant isn't in the bundle.
    solid?: boolean;
    style?: Partial<CSSStyleProperties>;
}

// The FontAwesome family + default weight are theme-driven so this component
// stays identical across projects. Each project's CSS theme sets `--fa-style`
// (classic → far/fas, sharp → fasr/fass) and `--fa-default-solid` (0/1). Read
// once at load; falls back to classic/regular under SSR (no getComputedStyle).
function readIconTheme(): { regular: string; solid: string; defaultSolid: boolean } {
    let sharp = false, defaultSolid = false;
    if (typeof document !== "undefined" && typeof getComputedStyle === "function" && document.documentElement) {
        const cs = getComputedStyle(document.documentElement);
        sharp = cs.getPropertyValue("--fa-style").trim() === "sharp";
        defaultSolid = cs.getPropertyValue("--fa-default-solid").trim() === "1";
    }
    return { regular: sharp ? "fasr" : "far", solid: sharp ? "fass" : "fas", defaultSolid };
}

const _iconTheme = readIconTheme();
const FA_PREFIX_REGULAR = _iconTheme.regular;
const FA_PREFIX_SOLID = _iconTheme.solid;

// Set `--fa-default-solid: 1` in the theme to make the app default to solid icons.
// Individual icons still override per-call with `solid` (true/false) or `prefix`.
const FA_DEFAULT_SOLID: boolean = _iconTheme.defaultSolid;

const FA_PREFIX_DEFAULT = FA_DEFAULT_SOLID ? FA_PREFIX_SOLID : FA_PREFIX_REGULAR;

const ICON_BASE = "shrink-0";
const ICON_INLINE = "inline-block align-middle";

// Custom (non-FontAwesome) icon registry — a registered name overrides any FA
// lookup for the same name. This shared component ships with it EMPTY: each
// project registers its own SVGs from its app entry (see frontend/src/appIcons.ts)
// via registerIcon, so Icons.tsx stays identical across projects.
const customIcons: Record<string, CustomIconDef> = {};

// Register a custom icon under `name`, overriding FontAwesome for that name.
// Call from the app's own icon module (e.g. appIcons.ts), imported for side
// effect at startup so every icon is registered before the first Icon renders.
export function registerIcon(name: string, def: CustomIconDef) {
    customIcons[name] = def;
}

// [minX, minY, width, height, svgPath] — viewBox is cropped to the glyph.
type FAEntry = readonly [number, number, number, number, string];

function resolveFAIcon(name: string, prefix: string): FAEntry | undefined {
    return FA_ICONS[prefix + ":" + name];
}

export function Icon(props: IconProps) {
    const size = () => props.size ?? 16;

    const custom = () => customIcons[props.icon];
    // Style resolution: an explicit `prefix` wins; then a per-icon `solid`
    // override (true→solid, false→regular); otherwise the app-wide default set
    // by FA_DEFAULT_SOLID. The fallback chain lets any icon resolve regardless
    // of which style it actually ships in, so opting into solid never blanks.
    const faDef = (): FAEntry | undefined => {
        if (custom()) return undefined;
        let want: string;
        if (props.prefix) want = props.prefix;
        else if (props.solid === true) want = FA_PREFIX_SOLID;
        else if (props.solid === false) want = FA_PREFIX_REGULAR;
        else want = FA_PREFIX_DEFAULT;
        return resolveFAIcon(props.icon, want)
            || resolveFAIcon(props.icon, FA_PREFIX_REGULAR)
            || resolveFAIcon(props.icon, FA_PREFIX_SOLID);
    };

    // viewBox as [minX, minY, width, height]: custom icons are 0-origin; FA icons
    // carry a viewBox cropped to the glyph so they render at their intended size.
    const box = (): [number, number, number, number] => {
        const c = custom();
        if (c) return [0, 0, c.viewBox[0], c.viewBox[1]];
        const fa = faDef();
        return fa ? [fa[0], fa[1], fa[2], fa[3]] : [0, 0, 512, 512];
    };
    const vw = () => box()[2];
    const vh = () => box()[3];
    const svgContent = () => {
        const c = custom();
        if (c) return c.content;
        const fa = faDef();
        return fa ? '<path d="' + fa[4] + '"/>' : "";
    };

    const h = (): number => {
        const s = size();
        return Array.isArray(s) ? (s[1] ?? s[0]) : s;
    };
    const w = (): number => {
        const s = size();
        return Array.isArray(s) ? s[0] : Math.round(h() * (vw() / vh()));
    };

    return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox={box().join(" ")} fill="currentColor" width={w()} height={h()} class={ICON_BASE + " " + (props.class || "")} innerHTML={svgContent()}></svg>
    );
}

export function IconInline(props: IconProps) {
    return <Icon icon={props.icon} size={props.size} prefix={props.prefix} solid={props.solid} class={ICON_INLINE + " " + (props.class || "")}/>;
}

export function IconSuccess(props: IconProps) {
    return <Icon icon={props.icon} size={props.size} prefix={props.prefix} solid={props.solid} class={ICON_INLINE + " text-green-600 " + (props.class || "")}/>;
}

export function IconError(props: IconProps) {
    return <Icon icon={props.icon} size={props.size} prefix={props.prefix} solid={props.solid} class={ICON_INLINE + " text-red-600 " + (props.class || "")}/>;
}

interface IconContainerProps {
    children?: JSXElement;
}

export function IconContainer(props: IconContainerProps) {
    return <span class="flex flex-row items-center gap-2">{props.children}</span>;
}