useIconPicker

Headless hook for building custom icon picker UIs. Manages dialog open/close state and selection.

Signature

const picker = useIconPicker(options?);

Parameters

Prop	Type	Required	Description
sources	IconSource[]	No	Enabled sources (default: all four)
onSelect	(icon: IconValue | null) => void	No	Called on selection or clear

Return value

Property	Type	Description
isOpen	boolean	Whether the picker dialog is open
selected	IconValue | null	Currently selected icon
open	() => void	Opens the picker dialog
close	() => void	Closes without selecting
select	(icon: IconValue | null) => void	Confirms selection and closes
clear	() => void	Clears selection to null
sources	IconSource[]	Active source list

Example

import { Button, useIconPicker, IconDisplay } from "@zaflun/lumio-sdk";

function CustomPicker() {
  const { open, selected, clear, isOpen } = useIconPicker({
    sources: ["lucide", "emoji"],
    onSelect: (icon) => console.log("Selected:", icon),
  });

  return (
    <VStack>
      <Button label="Pick Icon" onClick={open} />
      {selected && (
        <>
          <IconDisplay icon={selected} size={48} />
          <Button label="Clear" variant="destructive" onClick={clear} />
        </>
      )}
    </VStack>
  );
}