Icon Picker Command Menu Block for React

So you can see it without a click. On load the menu is the Command with its band drawn inline under a picture of the settings, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the stroke and size you set in the copy are the ones the dialog opens with. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Each slider steps through five stops (stroke 1, 1.5, 2, 2.5 and 3; size 16, 20, 24, 28 and 32 pixels), so its value is the stop's place and its spoken value is the stop in words ("1.5 stroke", "24 pixels"). Every row keeps a box of the same size for its icon and draws the icon at the chosen size inside it, so a larger icon never makes a taller row and the highlight stays where it was. The sliders sit outside the command, because its keys would take the arrows from them; Tab reaches them from the list.

The JSX for the highlighted icon with the props the sliders chose, through the clipboard: the component's name, strokeWidth and size. The status line says what was copied, or that the browser refused. Enter then sets the block's icon (the tile and the Icon field in the drawn settings) and closes the menu with focus on the field. The Copy button in the band copies the same text and changes nothing else. Each row also shows the import line, so what you paste has its import beside it.

Yes. The set is typed data: a name, the component, a group and the words the search reads, so swap GLYPHS for your own list and change the import line and the JSX in importOf and jsxOf. The rows only draw the component with a size and a strokeWidth, which most icon packages accept; a set with fixed strokes would drop the Stroke slider.

All of it. The icons, the sliders and the chosen icon are state in the block; nothing is saved, and the clipboard is the only thing the browser really does. In your app write the chosen icon, size and stroke to the selected block in pick, and persist them with the block.

Yes. Type to search by name or by a word like mail or arrow, the arrow keys move through the icons, Enter copies and chooses, and Escape closes the menu and puts focus on the field; Tab reaches the two sliders and Copy. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The icons are hidden from assistive technology; every row carries the name, and the block's icon is read as ", the block's icon".