Icon Menu

Installation

pnpm add @notion-kit/icon-menu

pnpm add @notion-kit/icon-menu

Examples

With `IconBlock`

"use client";

import { useState } from "react";

import { IconBlock, type IconData } from "@notion-kit/icon-block";
import { IconMenu } from "@notion-kit/icon-menu";

const defaultIcon: IconData = { type: "text", src: "S" };

export default function Default() {
  const [icon, setIcon] = useState<IconData>(defaultIcon);

  return (
    <IconMenu
      onSelect={setIcon}
      onRemove={() => setIcon(defaultIcon)}
      onUpload={(file) =>
        setIcon({
          type: "url",
          src: URL.createObjectURL(file),
        })
      }
    >
      <IconBlock icon={icon} size="lg" />
    </IconMenu>
  );
}

"use client";import { useState } from "react";import { IconBlock, type IconData } from "@notion-kit/icon-block";import { IconMenu } from "@notion-kit/icon-menu";const defaultIcon: IconData = { type: "text", src: "S" };export default function Default() {  const [icon, setIcon] = useState<IconData>(defaultIcon);  return (    <IconMenu      onSelect={setIcon}      onRemove={() => setIcon(defaultIcon)}      onUpload={(file) =>        setIcon({          type: "url",          src: URL.createObjectURL(file),        })      }    >      <IconBlock icon={icon} size="lg" />    </IconMenu>  );}

API Reference

IconMenu

Prop	Type	Default	Description
`disabled`	`boolean`	-	Whether the menu is disabled.
`onSelect`	`(icon: IconData) => void`	-	Handler that is called when an icon or emoji is selected or when a URL is submitted.
`onUpload`	`(file: File) => void`	-	Handler that is called when an image file is submitted.
`onRemove`	`() => void`	-	Handler that is called when the remove button is clicked.

See IconData

Icon Menu

Installation

Examples

With IconBlock

API Reference

IconMenu

On this page

With `IconBlock`