Icon

SVG slot wrapper

No icon set is bundled — a set is a dependency and a style, and the library's own controls make do with type (×, ‹ ›, ✓, ▾). BlessIcon is the box any SVG goes in: it sizes it, colours it with the surrounding text, and handles the accessibility switch. Paste an SVG, or render a component from a set inside it.

Sets that sit well with thin Roboto: Lucide and Tabler (1.5–2px strokes, no fill). A stroke icon (fill="none" stroke="currentColor") keeps its own attributes; a bare-path icon with no fill is filled with the text colour.

Size it to the text beside it — size="sm" in a button, md in a line of body text, or any CSS length. Decorative icons (next to a label that already says it) get no label and are hidden from screen readers; an icon that carries the meaning on its own gets label, which makes it role="img".

Basic

<script setup lang="ts">
import { BlessButton, BlessIcon } from "blessing-ui";
const sizes = ["xs", "sm", "md", "lg", "xl"] as const;
</script>

<template>
  <div class="row">
    <BlessIcon v-for="s in sizes" :key="s" :size="s">
      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
    </BlessIcon>
    <BlessIcon size="40px" label="Opens in a new tab">
      <svg viewBox="0 0 24 24">
        <path d="M14 3h7v7h-2V6.4l-9.3 9.3-1.4-1.4L17.6 5H14zM5 5h6v2H7v10h10v-4h2v6H5z" />
      </svg>
    </BlessIcon>
    <BlessButton>
      <template #prefix>
        <BlessIcon size="sm"
          ><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg
        ></BlessIcon>
      </template>
      Play
    </BlessButton>
  </div>
</template>

Usage

import { BlessIcon } from "blessing-ui";

API

Props

Name	Type	Default	Description
size	"md" | "sm" | "xs" | "lg" | "xl" | "2xs" | (string & {})	"md"	token key (2xs…xl) or any CSS length
label	string	—	accessible name; omit for decorative

Slots

Name	Scope	Description
default	—