Icon Gallery

Busca, previsualiza y copia los iconos públicos de zenit, y descubre cómo se reparten el trabajo las constantes estáticas, el registry dinámico y la capa semántica.

Dos puntos de entrada

Las builds públicas incluyen Lucide (lucide-static v1.31.0). El catálogo completo del provider es ui.icons, con 2,026 nombres: 2,025 SVG de upstream más el alias de compatibilidad hand-pointing (idéntico byte a byte al pointer.svg de upstream). ui.system_icons ofrece 45 roles semánticos independientes del provider; los componentes propios de zenit solo dependen de ellos, así que ningún nombre de proveedor se filtra al contrato público de componentes.

Los 2,026 iconos

Escribe para filtrar al instante; los iconos se cargan de 180 en 180 para que la página nunca cree dos mil nodos DOM de golpe. Haz clic en cualquier icono para obtener una llamada a ui.iconTint lista para pegar; los nombres que necesitan escape (como ui.icons.@"type") siguen las reglas del generador.

Renderizado y tinte

En build, gen-icons convierte cada icono en geometría aplanada (cada Asset lleva un icon_id y reps por tamaño). En runtime, ui.iconTint elige la rep más cercana al tamaño lógico y la escribe en el nodo: no se ejecuta ningún motor SVG en la ventana; solo un Asset sin geometría preaplanada recurre a la rasterización con svgTint. Cuando el ancho / alto no son píxeles fijos, se aplica el tamaño por defecto del Asset (24 en Lucide).

ui.iconTint es lo más adecuado para colores que siguen el tema; un mismo Asset se reutiliza con cualquier tamaño y color. ui.icon no acepta tinte y dibuja en blanco, así que usa iconTint sobre fondos claros. Usa ui.iconTintStyled cuando necesites campos de BoxStyle como la opacidad. Para recolorear un icono ya montado (hover, estado seleccionado), llama a node.setTint(color): cubre tanto el almacenamiento de la tabla de iconos como el almacenamiento de imagen del fallback svgTint, y devuelve false si el nodo no tiene ninguno.

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

El contrato de iconos semánticos

El código de componentes debería usar ui.system_icons.close en lugar de atarse al nombre de un proveedor. El perfil de Lucide mapea los 45 roles a Assets concretos en src/ui/system_icons_lucide.zig; cambiar de provider con -Dicon-set no altera la API de los componentes.

Roles cuyo nombre en Lucide es distinto:

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

Nombres, actualizaciones y licencia

• ✓

  Dos grafías. Las búsquedas en el registry usan el nombre de origen en kebab-case de Lucide (ui.icons.get("circle-alert")); las constantes de Zig cambian los guiones por guiones bajos (ui.icons.circle_alert).

• ✓

  Escape automático. Las constantes que coinciden con palabras clave de Zig o nombres de tipos primitivos (incluidos iN / uN), o que empiezan por un dígito, las escapa el generador — por ejemplo ui.icons.@"type"; el get dinámico no se ve afectado.

• ✓

  Enumerable. ui.icons.all es un array de entradas { name, asset } ordenado por nombre; get hace búsqueda binaria sobre él.

• ✓

  Idénticos a upstream. Los archivos SVG son idénticos byte a byte a los de upstream para facilitar actualizaciones y auditorías de licencia; borra los archivos antiguos antes de copiar para que no queden iconos renombrados.

• ✓

  Licencia aparte. Lucide tiene licencia ISC (src/ui/icons_oss/LICENSE) y no está cubierto por la licencia GPL-3.0-only de la raíz 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