The symbol picker

createSymbolPicker puts a searchable picker on a page: every icon, frame and point of the catalog, searched by name, code or hierarchy, filtered by symbol set, in a chosen identity.

import {createSymbolPicker} from '@zaes/military-symbols/picker';

const picker = createSymbolPicker(document.getElementById('picker')!, {
    onPick: (sidc, entity) => console.log(sidc, entity.path.join(' › ')),
});

picker.search('armor');
picker.setIdentity('6');          // hostile
picker.setSymbolSet('10');        // land units only; undefined for all
picker.destroy();

Option
onPick	called with the code and its catalog entry
standard	'2525E' (default) or '2525D' codes; 2525D leaves out what 2525D lacks
identity	the standard identity digit the thumbnails draw in
symbolSets	which sets to offer
size	thumbnail size in pixels
display	the display options of renderSymbol
identityControl	show the identity choice

It uses no framework and adds one <style> per document. Its colours are --zms-picker-* custom properties, and it follows light and dark; on a dark page each thumbnail sits on a light tile, since the symbols' black lines and fills are meant for a light ground.