Icon Gallery

Recherchez, prévisualisez et copiez les icônes publiques de zenit, et voyez comment constantes statiques, registry dynamique et couche sémantique se répartissent le travail.

Deux points d’entrée

Les builds publiques embarquent Lucide (lucide-static v1.31.0). Le catalogue complet du provider est ui.icons, avec 2,026 noms : 2,025 SVG upstream plus l’alias de compatibilité hand-pointing (identique octet pour octet au pointer.svg upstream). ui.system_icons propose 45 rôles sémantiques indépendants du provider ; les composants de zenit ne dépendent que de ceux-ci, si bien qu’aucun nom de fournisseur ne fuit dans le contrat public des composants.

Les 2,026 icônes

Tapez pour filtrer instantanément ; les icônes se chargent par 180 afin que la page ne crée jamais deux mille nœuds DOM d’un coup. Cliquez sur une icône pour obtenir un appel ui.iconTint prêt à coller ; les noms qui doivent être échappés (comme ui.icons.@"type") suivent les règles du générateur.

Rendu et teinte

Au build, gen-icons transforme chaque icône en géométrie aplatie (chaque Asset porte un icon_id et des reps par taille). À l’exécution, ui.iconTint choisit la rep la plus proche de la taille logique et l’écrit dans le nœud — aucun moteur SVG ne tourne dans la fenêtre ; seul un Asset sans géométrie pré-aplatie se rabat sur la rastérisation svgTint. Quand largeur / hauteur ne sont pas des pixels fixes, la taille par défaut de l’Asset s’applique (24 pour Lucide).

ui.iconTint est le meilleur choix pour des couleurs qui suivent le thème ; un même Asset se réutilise à toute taille et en toute couleur. ui.icon ne prend pas de teinte et dessine en blanc : sur fond clair, préférez iconTint. Utilisez ui.iconTintStyled quand vous avez besoin de champs BoxStyle comme l’opacité. Pour recolorer une icône déjà montée (hover, état sélectionné), appelez node.setTint(color) : il gère à la fois le stockage de la table d’icônes et le stockage d’image du repli svgTint, et renvoie false si le nœud n’a ni l’un ni l’autre.

// 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});
}

Le contrat des icônes sémantiques

Le code des composants devrait écrire ui.system_icons.close plutôt que se lier au nom d’un fournisseur. Le profil Lucide mappe les 45 rôles vers des Assets concrets dans src/ui/system_icons_lucide.zig ; changer de provider avec -Dicon-set laisse l’API des composants inchangée.

Rôles dont le nom Lucide diffère :

// 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";

Noms, mises à jour et licence

• ✓

  Deux graphies. Les recherches dans le registry utilisent le nom source Lucide en kebab-case (ui.icons.get("circle-alert")) ; les constantes Zig remplacent les tirets par des underscores (ui.icons.circle_alert).

• ✓

  Échappement automatique. Les constantes qui entrent en collision avec des mots-clés Zig ou des noms de types primitifs (y compris iN / uN), ou qui commencent par un chiffre, sont échappées par le générateur — par exemple ui.icons.@"type" ; le get dynamique n’est pas concerné.

• ✓

  Énumérable. ui.icons.all est un tableau d’entrées { name, asset } trié par nom ; get y effectue une recherche dichotomique.

• ✓

  Identiques à l’upstream. Les fichiers SVG sont identiques octet pour octet à l’upstream, pour des mises à jour et des audits de licence propres ; supprimez les anciens fichiers avant de copier afin que les icônes renommées ne subsistent pas.

• ✓

  Licence distincte. Lucide est sous licence ISC (src/ui/icons_oss/LICENSE) et n’est pas couvert par la licence GPL-3.0-only à la racine de 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