--- title: "Icon-Galerie — zenit Zig UI Doku" description: "Suchen, betrachten und kopieren Sie die öffentlichen Icons von zenit und sehen Sie, wie statische Konstanten, die dynamische Registry und die semantische…" url: https://zenit.z.express/de/docs/guide/icons language: de alternate_en: https://zenit.z.express/docs/guide/icons.md alternate_zh: https://zenit.z.express/zh/docs/guide/icons.md alternate_es: https://zenit.z.express/es/docs/guide/icons.md alternate_ja: https://zenit.z.express/ja/docs/guide/icons.md alternate_ko: https://zenit.z.express/ko/docs/guide/icons.md alternate_fr: https://zenit.z.express/fr/docs/guide/icons.md project: zenit v0.1.0-alpha (Zig 0.15.2, macOS) source: https://github.com/version-next/zenit --- # 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. | Einstiegspunkt | Verwendung | | --- | --- | | `ui.system_icons` | 45 stabile semantische Rollen (close, search, alert, pointer…); für wiederverwendbaren Framework- / Paketcode, der mit jedem Provider kompilieren muss | | `ui.icons` | 2,026 Lucide-Namen; für Produkt-UI und dynamische Konfiguration | | `ui.assets.common` | 17 Legacy-Kompatibilitäts-Icons; für neuen Code nicht empfohlen | ICON PATH Semantische Rolle → Provider-Mapping → Asset → Icon-Renderpfad. Ein Providerwechsel ersetzt nur das Mapping-Modul. [Video](https://zenit.z.express/media/stories/icons.mp4?v=6dffffbd52) Die Story der semantischen Icons im echten zenit Storybook: Ein virtueller Cursor fährt Rollen, Größen und Tönungen ab; der vollständige Provider-Katalog steht in der Webliste unten. [/components/icons](https://zenit.z.express/de/components/icons) ## 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. 180 / 2,026 ## 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. `icons.zig` ```zig // 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. activity alert audio check close search heart star home settings notification calendar user mail trash download upload edit copy lock chevron\_down chevron\_up chevron\_left chevron\_right minus plus more\_horizontal cursor\_default cursor\_click pointer move not\_allowed grab resize\_horizontal resize\_vertical resize\_diagonal wait progress help warning info chevrons\_up pause sun moon Rollen mit abweichendem Lucide-Namen: | ui.system\_icons | Lucide-Quellname | | --- | --- | | `alert` | `circle-alert` | | `audio` | `headphones` | | `close` | `x` | | `home` | `house` | | `notification` | `bell` | | `trash` | `trash-2` | | `edit` | `pencil` | | `more_horizontal` | `ellipsis` | | `cursor_default` | `mouse-pointer-2` | | `cursor_click` | `mouse-pointer-click` | | `pointer` | `hand-pointing` | | `not_allowed` | `ban` | | `grab` | `hand` | | `resize_horizontal` | `chevrons-left-right` | | `resize_vertical` | `chevrons-up-down` | | `resize_diagonal` | `expand` | | `wait` | `hourglass` | | `progress` | `loader-circle` | | `help` | `circle-help` | | `warning` | `triangle-alert` | `semantic.zig` ```zig // 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. ```sh # 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 ``` > TIP > > **Reine Icon-Buttons brauchen trotzdem Worte.** Ein Icon-Name ist kein für Menschen lesbares Label. Das `.label` eines Buttons ist zugleich sein sichtbarer Text und sein zugänglicher Name; setzen Sie bei einem reinen Icon-Button ohne Text nach dem Mounten `node.behavior.interaction.a11y.label`, damit Optik, Trefferbereich und Hilfstechnologie-Aktion auf dieselbe Operation zeigen.