BankaiIcon

An agnostic icon wrapper: a consistent 1:1 box, sizing, currentColor alignment, and accessibility around whatever icon mechanism you already use — an inline <svg>, a CSS icon font, or a mask-based set (UnoCSS/Iconify). It ships no icons of its own.

Example

Three ways to give it an icon

Pick whichever fits: put an inline <svg> (or an icon component) in the default slot; pass a CSS icon class straight through with class; or hand a token to name. name and class do the same job — both put a class on the root — but name goes through the optional config.icon.class resolver, so a bare token like mdi:home can be mapped to your setup's class in one place. With no resolver, name is applied verbatim, so it already works for UnoCSS / Iconify-CSS.

<!-- 1) default slot: an inline <svg> (or any icon component) -->
<BankaiIcon label="Home">
  <svg viewBox="0 0 24 24"><path d="M12 3 3 10v11h6v-6h6v6h6V10z" /></svg>
</BankaiIcon>

<!-- 2) class: a CSS icon class straight through (UnoCSS, Iconify-CSS, a font set) -->
<BankaiIcon class="i-mdi-home" label="Home" />

<!-- 3) name: the same, but through the optional config.icon.class resolver -->
<BankaiIcon name="i-mdi-home" label="Home" />

Decorative vs meaningful

By default an icon is decorative and hidden from assistive tech (aria-hidden). Give it a label for a meaningful icon and it becomes role="img" with an aria-label, so screen readers announce it.

Sizing & the 1:1 box

size is a named xs–xl step plus a verbatim escape hatch (any CSS length). The box is square by default and a non-square glyph is centered and letterboxed rather than distorted; opt out with no-square to keep the glyph's own aspect ratio.

Props

Prop	Type	Default	Description
`as`	`BankaiIconElement \| string`	`'span'`	Element to render as. Polymorphic — suggests BankaiIconElement ('span' / 'i'); any tag string is also accepted.
`name`	`string`	—	Icon token, applied as a class on the root — the ergonomic, reactive counterpart to writing the class yourself. With no resolver it is applied verbatim (so name="i-mdi-home" works out of the box for UnoCSS / Iconify-CSS); set config.icon.class to map a bare token (e.g. 'mdi:home') to your setup's class. Omit it and use the default slot for an inline <svg> / icon component instead.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| string`	—	Icon size. A named xs–xl step (--bankai-icon-size-*) reflects as data-bankai-size; any other string is a verbatim CSS font-size driving the 1em box. Omitted when unset (inherits the ambient font size, so the icon matches surrounding text).
`label`	`string`	—	Accessible name for a MEANINGFUL icon: sets role="img" + aria-label, so assistive tech announces it. Leave unset for a DECORATIVE icon — the default — and the root is hidden from assistive tech with aria-hidden (unless you supply your own aria-label/aria-labelledby/title/role="img").
`no-square`	`boolean`	`false`	Opt out of the default 1:1 (square) box and let the icon keep its own aspect ratio (height driven by size, width intrinsic). By default the root is a square box and non-square content is centered and contained (letterboxed) rather than distorted. Reflected as data-bankai-square="false" when set.

Emits

This component emits no events.

Slots

Slot	Description
`#default`	The icon markup — an inline <svg>, a third-party icon component (e.g. Iconify's <Icon> / <iconify-icon>), an <img>, or an SVG sprite <use>. The wrapper adds the box + a11y around it.

Exposes

This component exposes nothing on its instance.

Theming

Every token is a :root custom property applied through zero-specificity :where() rules, so a single plain declaration overrides one — no selector, no !important. Set it globally on :root or locally on any ancestor.

Token	Default	Purpose
`--bankai-icon-size-xs`	`0.75rem`	Icon size at the xs step.
`--bankai-icon-size-sm`	`1rem`	Icon size at the sm step.
`--bankai-icon-size-md`	`1.25rem`	Icon size at the md step.
`--bankai-icon-size-lg`	`1.5rem`	Icon size at the lg step.
`--bankai-icon-size-xl`	`2rem`	Icon size at the xl step.