Specimen de iconografia

Galeria real dentro de `air`, montada sobre su layout y sus tokens. Aqui validamos escala, grosor, tono y legibilidad del set completo sin salir del sistema.

{totalIconCount} glyphs {previewSizeLabel} size {previewStrokeLabel} stroke {tone} tone

API Icon.Name size='xxs|xs|sm|md|lg|xl|xxl|number|string' · strokeWidth='auto|sm|md|lg|number'

DOM button.icon-card > span.icon-stage > svg

{#if search} {/if}

{#each sizes as item} {/each}

Custom size

(sizeMode = 'custom')} /> {customSize}px

{#each strokeWidths as item} {/each}

`auto` adapta el grosor al tamano del icono. `sm`, `md` y `lg` fuerzan un override fijo.

{#each sizes as item}

{item} {AIR_ICON_AUTO_STROKE_BY_SIZE[item]}

{/each}

{#each tones as item} {/each}

Token scale reference

La escala real del sistema de iconos. Aqui se ven a la vez los seis tamanos canonicos, el valor en px y el stroke automatico asociado.

{#each sizes as item}

{item} {sizeTokens[item]} · auto {AIR_ICON_AUTO_STROKE_BY_SIZE[item]}

{/each}

{#each filteredCategories as category} {#if selectedCategory === null || selectedCategory === category.name}

{category.name}

{category.label}

{category.icons.length} icons

{#each category.icons as icon} {@const IconComponent = getIconComponent(icon.pascal)} {#if IconComponent} {/if} {/each}

{/if} {/each}