Icons

Static Bloom uses Lucide through @lucide/vue, a dependency of @static-bloom/vue: one stroked set, 24×24 grid, 2px stroke, ISC licensed. Icons are SVG components bundled with your app, so nothing loads from the network.

Stable

Use

<script setup lang="ts">
import { MapIcon, Zap } from '@lucide/vue'
</script>

<template>
  <button class="sb-btn"><Zap />Overclock</button>
  <button class="sb-btn sb-btn-ghost sb-btn-icon" aria-label="Open map"><MapIcon /></button>
</template>

Every icon is exported under its name and with an Icon suffix (Map and MapIcon); the suffixed form avoids shadowing globals such as Map.

Size and color

Prop	Default	Notes
`size`	`24`	Sets `width` and `height`
`stroke-width`	`2`	In icon units, so it scales with the icon
`non-scaling-stroke`	`false`	Keeps the stroke width constant at any size
`color`	`currentColor`	The stroke; usually leave it and set the text color

Inside Static Bloom components you rarely set size: the CSS sizes direct svg children to the text. Buttons use 1.125em (1.25em in sb-btn-icon), badges 0.875em, and stat labels 0.875rem in the stat’s intent color. Elsewhere, use 16px next to small text, 20px next to body text and 24px for standalone icons. Each icon also gets the classes lucide and lucide-<name> for styling.

Accessibility

Lucide adds aria-hidden="true" automatically unless you pass an aria-* attribute, role or title, so an icon next to a text label is ignored by screen readers, as it should be.
An icon-only button needs a name on the button: aria-label="Open map". Do not rely on a title tooltip; in-game pages cannot show them.
A standalone icon that carries meaning (a status, a warning) gets role="img" and an aria-label, or visible text next to it.

Outside Vue

These docs use Starlight’s <Icon> component. On plain HTML pages, copy the SVG markup of a Lucide icon from lucide.dev into the page; the sb-btn, sb-badge and sb-stat-label classes size inline svg elements the same way.