Icon

SIcon is a primitive for SVG icons. The main way to use it is the icon prop with a registry name (icon="mail"); the library ships a curated set of common icons (geometry from Lucide), and any others are added with registerIcons. The color comes from the color prop (a palette name) or is inherited through currentColor; the size comes from the size prop. The full guide is on the Icons page.

Named icons

Pass a name to the icon prop, and it resolves to an SVG through the registry:

<template>
  <SIcon
    icon="mail"
    :size="24"
  />
  <SIcon
    icon="search"
    :size="24"
  />
  <SIcon
    icon="calendar"
    :size="24"
  />
</template>

The names available out of the box are listed in the Built-in set section.

Sizes

The size prop takes a token — sm (16px) / md (20px) / lg (24px) — or a number of pixels:

<template>
  <SIcon
    icon="star"
    size="sm"
  />
  <SIcon
    icon="star"
    size="md"
  />
  <SIcon
    icon="star"
    size="lg"
  />
  <SIcon
    icon="star"
    :size="40"
  />
</template>

Color

The icon color is set with the color prop — a name from the palette (primary, teal, teal-10). Without it, the icon uses currentColor and inherits the parent's color.

<template>
  <SIcon
    icon="circle-check"
    color="indigo"
  />
</template>

Inheriting through currentColor is handy when the icon should match the color of the text next to it:

<template>
  <span style="color: var(--s-color-primary)">
    <SIcon
      icon="circle-check"
      label="Success"
    />
  </span>
</template>

Accessible name

Without label, the icon is decorative and hidden from screen readers (aria-hidden); with label, it gets role="img" and aria-label.

Three ways to set an icon

1. A registry name — icon="chevron-down" (the main way).
2. A raw SVG path — icon="M5 12h14M12 5v14" (a one-off icon without registration).
3. A slot — arbitrary SVG content; it overrides the icon prop.

<template>
  <!-- registry name -->
  <SIcon
    icon="chevron-down"
    :size="24"
  />

  <!-- raw SVG path -->
  <SIcon
    icon="M5 12h14M12 5v14"
    :size="24"
  />

  <!-- arbitrary content through the slot -->
  <SIcon
    label="Circle"
    :size="24"
  >
    <circle
      cx="12"
      cy="12"
      r="9"
    />
  </SIcon>
</template>

Custom icons

For icons beyond the built-in set, import them from the @smalt-ui/core/icons subpath (a Lucide re-export, no separate install needed) and register them once at app startup:

// main.ts
import { registerIcons } from '@smalt-ui/core'
import { Rocket, Compass } from '@smalt-ui/core/icons'

registerIcons({
  rocket: Rocket,
  compass: Compass,
})

Once registered, the name is available in every component: <SIcon icon="rocket" />, <SButton icon="compass">…</SButton>. See the Icons page for details.

API

Props

Name	Type	Default	Description
icon	string	undefined	Icon: a registry name (chevron-down, check, …; see registerIcons) or a raw SVG path (d). Ignored when content is passed to the default slot.
color	string	undefined	Icon color: a name from the palette (primary/teal/teal-10). Without it, the icon inherits the parent's color through currentColor.
size	number | "md" | "sm" | "lg"	"md"	Size: a token (sm/md/lg) or a number of pixels.
label	string	undefined	Accessible name of the icon. When set, role="img" is applied; otherwise the icon is hidden from screen readers.
view-box	string	"0 0 24 24"	SVG viewBox.

Slots

Name	Description
default	SVG content of the icon (<path>, <circle>, etc.). Overrides the icon prop.