IconPicker

A universal icon picker for extension config panels. Lets users select from Lucide icons, Unicode emojis, platform emotes, or custom uploads.

Import

import { IconPicker } from "@zaflun/lumio-sdk";
import type { IconValue } from "@zaflun/lumio-sdk";

Props

Prop	Type	Required	Description
value	IconValue | null	Yes	Current selection
onChange	(icon: IconValue | null) => void	Yes	Called when the user picks or clears
sources	IconSource[]	No	Enabled tabs (default: all four)
size	"sm" | "md" | "lg"	No	Button size (default: "md")
placeholder	string	No	Text shown when no icon selected

IconValue

All icon selections produce a universal IconValue object:

interface IconValue {
  type: "lucide" | "emoji" | "emote" | "upload";
  value: string;
  label?: string;
  platform?: string;
}

Type	value	label	platform
lucide	Icon name ("heart")	Display name	--
emoji	Unicode character ("😀")	Emoji name	--
emote	CDN URL	Emote name	"twitch" | "7tv" | "bttv" | "ffz"
upload	Upload URL	Original filename	--

Sources

Control which tabs appear with the sources prop:

// Only Lucide icons and emojis
<IconPicker
  value={icon}
  onChange={setIcon}
  sources={["lucide", "emoji"]}
/>

Available sources: "lucide", "emoji", "emote", "upload".

Example

import { Lumio, CompactView, IconPicker, IconDisplay, useExtensionStorage } from "@zaflun/lumio-sdk";
import type { IconValue } from "@zaflun/lumio-sdk";

interface MyConfig {
  icon: IconValue | null;
  title: string;
}

function Editor() {
  const [config, setConfig] = useExtensionStorage<MyConfig>();

  return (
    <CompactView title="Alert Settings">
      <IconPicker
        value={config.icon ?? null}
        onChange={(icon) => setConfig({ ...config, icon })}
        placeholder="Choose alert icon"
        size="md"
      />
      <IconDisplay icon={config.icon ?? null} size={32} />
    </CompactView>
  );
}

Lumio.render(<Editor />, { target: "editor" });

Upload Tab

The upload tab uses ctx.upload() internally. Uploaded files are stored in the extension's storage bucket. Limits:

• Max file size: 256 KB
• Accepted formats: PNG, JPG, GIF, SVG, WebP, AVIF
• Quota: 50 files per extension per account

Duplicate uploads are deduplicated by content hash.