Component reference

IconSource

Render caller-supplied icon data through the shared functional-icon frame.

Preview

Caller icon data

Render application icons outside the semantic set through IconSource. The pinned meowtail/icons/lucide pass-through supplies Lucide data; the shared frame keeps theme stroke, sizing, and accessible naming.

packages/meowtail/stories/icons.stories.tsxline 284tsx

render: () => (
  <Specimens>
    <Specimen label="Icons outside the semantic set" aria-label="Application icons" align="start">
      <div className="workshop-row">
        {(
          [
            [Bell, "Notifications"],
            [Camera, "Camera"],
            [Rocket, "Rocket"],
          ] as const
        ).map(([source, name]) => (
          <span className="workshop-row">
            <IconSource source={source} size={20} />
            <span className="workshop-note">{name}</span>
          </span>
        ))}
      </div>
    </Specimen>
    <Specimen label="Named standalone icon" aria-label="Named standalone icon" align="start">
      <Inline gap="compact" align="center">
        <IconSource source={Bell} size={24} label="Notifications" />
        <span className="workshop-note">
          Pass label when the icon carries meaning on its own; otherwise it stays decorative.
        </span>
      </Inline>
    </Specimen>
  </Specimens>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { IconSource } from "meowtail";

<IconSource source={Bell} size={24} label="Notifications" />

API reference

Props

Prop	Type	Default
`source`RequiredIcon node data supplied by the caller from its own trusted icon source.	`IconNode`	–
`size`	`number`	–
`label`Omit for decorative icons. Icon-only controls should label the control itself.	`string`	–

DOM parts

This component has no registry contract.

Registry

This component has no registry contract. It is a story that shows several components together.