Icon
The icon primitive across Ecology. It inlines the Lucide SVGs it needs (no icon dependency), inherits color via currentColor, and maps to five sizes — xs=14, sm=16, md=20, lg=24, xl=28.
Preview
<EsaIcon name="star" size="md" />Sizes
Three sizes map to fixed pixel boxes via the --icon-size-* tokens.
<EsaIcon name="star" size="xs" />
<EsaIcon name="star" size="sm" />
<EsaIcon name="star" size="md" />
<EsaIcon name="star" size="lg" />
<EsaIcon name="star" size="xl" />Color
Icons inherit currentColor, so they take the text color of their context — set color on a wrapper to tint them.
<span style="color: var(--color-primary)"><EsaIcon name="circle-check" size="lg" /></span>
<span style="color: var(--color-warning)"><EsaIcon name="triangle-alert" size="lg" /></span>
<span style="color: var(--color-danger)"><EsaIcon name="circle-x" size="lg" /></span>
<span style="color: var(--color-info)"><EsaIcon name="info" size="lg" /></span>Gallery
The icons currently inlined in the lookup. Add entries to esa-icon.astro as new components need them.
home settings plus x check chevron-down chevron-up chevron-left chevron-right chevrons-left chevrons-right search filter arrow-left arrow-right arrow-up arrow-down circle-alert circle-check circle-x info eye pencil trash-2 copy download upload external-link calendar user users star loader menu bell triangle-alert save circle-question-mark API
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Lucide icon name (kebab-case), e.g. "chevron-down". Resolved against the inlined Lucide lookup; an unknown name renders an empty glyph. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Icon size — xs=14, sm=16, md=20, lg=24, xl=28. |
label | string | — | Accessible label. When provided the icon becomes role="img"; when omitted the icon is decorative (aria-hidden). |
Accessibility
- Decorative (default): no
label→ the icon isaria-hidden="true"and skipped by screen readers. - Meaningful: pass
label→ the icon getsrole="img"+aria-label, e.g. . - The inner
<svg>isfocusable="false"to keep it out of the tab order in legacy browsers.
Theming surface
Every public token this component reads, extracted from its source at build time.
The Resolves to column walks each token's real lineage —
component → semantic → primitive → raw value — so you
can see exactly where re-pointing it lands. A spoke re-skins by overriding these in
its theme-<slug>.css; component internals are never edited. No
hook for what you need? File it with /request-lego.
| Token | Tier | Resolves to |
|---|---|---|
--icon-size-lg | semantic | 24px |
--icon-size-md | semantic | 20px |
--icon-size-sm | semantic | 16px |
--icon-size-xl | semantic | 28px |
--icon-size-xs | semantic | 14px |