cnc-icon-picker
A searchable grid for choosing an icon. It queries the server's own icon index rather than a
bundled list, so the whole Iconify catalogue is reachable — and the picked value is the
collection/name
string every other widget's icon property takes.
Quick start
Bind $value and handle change. Before any search the grid shows a
starter set; typing queries /@cnc/icons/search and replaces it.
value: heroicons/star
<div x-data="{ picked: 'heroicons/star' }">
<cnc-icon-picker $value="picked" @change="picked = $event.detail.value || ''"></cnc-icon-picker>
</div>The search route
x-icon
needs an exact name; the picker is how a person finds one.
GET /@cnc/icons/search?q=…
searches the app's own icons/ folder first, then Iconify, and returns
{ icons: […], total }
in the same collection/name spelling x-icon takes. When Iconify
cannot be reached it answers with the local matches alone, so an offline dev box still finds
its own icons.
Usage guidance
The grid needs the SERVER. Searching calls /@cnc/icons/search, so the picker is for
authoring surfaces inside your own application — an admin screen, a settings form —
and a failed lookup deliberately leaves the previous grid in place rather than blanking it,
which means a broken endpoint looks like a search that found nothing.
Set prefix almost always. Unrestricted search spans every Iconify collection, so a
user picking freely will mix visual styles across your application; naming the collection you
have standardised on removes that whole class of inconsistency at the source.
The value is exactly what other widgets want. Whatever is picked here can be handed straight to
a cnc-icon name, a cnc-button icon or a nav
node's icon field without translation.