Icon Gallery

Suchen, betrachten und kopieren Sie die öffentlichen Icons von zenit und sehen Sie, wie statische Konstanten, die dynamische Registry und die semantische Ebene sich die Arbeit teilen.

Zwei Einstiegspunkte

Öffentliche Builds liefern Lucide mit (lucide-static v1.31.0). Der vollständige Provider-Katalog ist ui.icons mit 2,026 Namen: 2,025 Upstream-SVGs plus der Kompatibilitätsalias hand-pointing (byteidentisch mit dem Upstream-pointer.svg). ui.system_icons bietet 45 providerneutrale semantische Rollen; die Komponenten von zenit hängen nur von diesen ab, sodass keine Herstellernamen in den öffentlichen Komponentenvertrag gelangen.

Alle 2,026 Icons

Tippen Sie, um sofort zu filtern; Icons werden in Schritten von 180 geladen, damit die Seite nie zweitausend DOM-Knoten auf einmal erzeugt. Klicken Sie auf ein Icon, um einen einfügefertigen ui.iconTint-Aufruf zu erhalten; Namen, die maskiert werden müssen (etwa ui.icons.@"type"), folgen den Regeln des Generators.

Rendering und Tönung

Zur Build-Zeit wandelt gen-icons jedes Icon in abgeflachte Geometrie um (jedes Asset trägt eine icon_id und größenspezifische reps). Zur Laufzeit wählt ui.iconTint die Rep, die der logischen Größe am nächsten liegt, und schreibt sie in den Knoten — im Fenster läuft keine SVG-Engine; nur ein Asset ohne vorab abgeflachte Geometrie fällt auf die Rasterung mit svgTint zurück. Sind Breite / Höhe keine festen Pixel, gilt die Standardgröße des Assets (24 bei Lucide).

ui.iconTint eignet sich am besten für Farben, die dem Theme folgen; ein Asset lässt sich in jeder Größe und Farbe wiederverwenden. ui.icon nimmt keine Tönung und zeichnet weiß, verwenden Sie auf hellen Hintergründen also iconTint. Nutzen Sie ui.iconTintStyled, wenn Sie BoxStyle-Felder wie Deckkraft brauchen. Um ein bereits gemountetes Icon umzufärben (Hover, ausgewählter Zustand), rufen Sie node.setTint(color) auf: Es behandelt sowohl den Icon-Tabellen-Speicher als auch den Bildspeicher des svgTint-Fallbacks und gibt false zurück, wenn der Knoten keins von beiden hat.

// Follow the theme: tint with a token color.
const settings = try ui.iconTint(
    cx,
    ui.icons.settings,
    cx.tokens.color.fg_secondary,
    .{ .width = .fixed(20), .height = .fixed(20) },
);

// Dynamic lookup by kebab-case source name (config files, user data).
const configured = ui.icons.get("circle-alert") orelse
    return error.UnknownIcon;
const warning = try ui.iconTint(cx, configured, cx.tokens.color.warning, .{
    .width = .fixed(24),
    .height = .fixed(24),
});

// Enumerate the whole registry.
for (ui.icons.all) |entry| {
    std.log.debug("{s}", .{entry.name});
}

Der Vertrag für semantische Icons

Komponentencode sollte ui.system_icons.close schreiben, statt sich an den Namen eines Herstellers zu binden. Das Lucide-Profil ordnet in src/ui/system_icons_lucide.zig alle 45 Rollen konkreten Assets zu; ein Providerwechsel mit -Dicon-set lässt die Komponenten-API unverändert.

Rollen mit abweichendem Lucide-Namen:

// Reusable code: depend on the role, not the provider's name.
const close = try ui.iconTint(cx, ui.system_icons.close, cx.tokens.color.fg_secondary, .{
    .width = .fixed(16),
    .height = .fixed(16),
});

// Icon-only button: no visible label, so set the accessible name explicitly.
const remove = try ui.widgets.Button(.{
    .icon_only = true,
    .icon_asset = ui.system_icons.trash,
    .variant = .ghost,
}).mount(scope, cx);
remove.behavior.interaction.a11y.label = "Delete";

Benennung, Updates und Lizenz

• ✓

  Zwei Schreibweisen. Registry-Abfragen nutzen den Lucide-Quellnamen in kebab-case (ui.icons.get("circle-alert")); Zig-Konstanten ersetzen Bindestriche durch Unterstriche (ui.icons.circle_alert).

• ✓

  Automatisches Maskieren. Konstanten, die mit Zig-Schlüsselwörtern oder primitiven Typnamen (einschließlich iN / uN) kollidieren oder mit einer Ziffer beginnen, maskiert der Generator — etwa ui.icons.@"type"; das dynamische get ist nicht betroffen.

• ✓

  Aufzählbar. ui.icons.all ist ein nach Namen sortiertes Array von { name, asset }-Einträgen; get durchsucht es binär.

• ✓

  Identisch mit Upstream. Die SVG-Dateien sind byteidentisch mit Upstream, für saubere Updates und Lizenzprüfungen; löschen Sie vor dem Kopieren die alten Dateien, damit umbenannte Icons nicht liegen bleiben.

• ✓

  Eigene Lizenz. Lucide steht unter der ISC-Lizenz (src/ui/icons_oss/LICENSE) und fällt nicht unter die GPL-3.0-only-Lizenz im Wurzelverzeichnis von zenit.

# Verify the Lucide profile (test-headless + storybook build); the worktree is not modified
bash scripts/switch_icon_set.sh lucide

# Regenerate the committed provider module after the SVG set changes
zig build gen-icons-lucide
zig build test-ui