Better Icons
CLI per cercare oltre 200 set di icone Iconify e recuperare SVG; l'output richiede l'eliminazione degli attributi fill
Richiede configurazione
Cosa fa
Avvolge la CLI npm `better-icons` in modo che Claude possa cercare tra oltre 200 collezioni di icone Iconify (lucide, mdi, tabler, heroicons, phosphor, solar) e recuperare SVG di icone tramite ID `prefix:name`. Si attiva quando un task implica la ricerca, la scelta o l'aggiunta di icone a un progetto piuttosto che la scrittura manuale di percorsi SVG a memoria. Documenta i flag CLI più un server MCP opzionale che espone strumenti di ricerca, batch-get, raccomandazione e scansione di progetti.
Rapporto di test
INSTALL 5/5: il frontmatter è parsabile con name+description; il corpo non fa riferimento a file locali, solo al pacchetto npm e all'API Iconify — controllato a campione registry.npmjs.org/better-icons (200, ultima 1.0.4, bin presente), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). Nessun percorso hardcoded, nessun curl|sh, nessun base64, nessuna esfiltrazione di segreti, nessun testo di iniezione. Nota di provenienza: questa è una copia venduta — l'autore upstream è better-auth/better-icons, non dtsola. TRIGGER 5/5, tutti giudicati correttamente. DOVREBBE attivarsi: "I need a good trash/delete icon for this toolbar, find me one" (sì); "What icon sets have a filled bell icon? Give me the SVG" (sì); "Add a settings gear icon to the Vue sidebar component" (sì). NON DOVREBBE: "Generate an app icon/logo for my macOS app at 1024x1024" (no — generazione logo, non ricerca libreria); "favicon.ico 404s in production" (no — bug di servizio di asset statici). Avvertenza: la clausola iniziale "Use when working with icons in any project" è troppo ampia; solo la seconda frase impedisce al caso 4 di attivarsi erroneamente. OUTPUT 6/10, misurato genuinamente. Task: fornire SVG `search` + `settings` inline da 24px da un set coerente per un'app Vue. BASELINE (solo frontmatter): ho indovinato `search` a memoria ma NON riuscivo a ricordare il percorso `settings` di Lucide e avrei dovuto troncarlo o ricorrere all'aggiunta di una dipendenza lucide-vue-next. SKILL: `npx better-icons@1.0.4 search settings --prefix lucide` quindi `get` ha restituito l'esatta geometria upstream — un vero vantaggio rispetto a ciò che la baseline aveva fallito. MA la CLI inietta `fill="currentColor"` (o il valore di `--color`) sugli elementi path/circle figli all'interno di un `<g fill="none">`, cosa che Iconify upstream non fa. Ho rasterizzato entrambi con rsvg-convert: icona di ricerca CLI = 46,1% pixel scuri vs upstream 19,4%; visivamente la lente d'ingrandimento si rende come un disco solido e l'ingranaggio come un blob senza caratteristiche senza foro centrale. Quindi seguire rigorosamente la skill spedisce icone di contorno rotte per la maggior parte delle collezioni che essa stessa raccomanda. Un sed di una riga che rimuove gli attributi fill figli ripristina il rendering corretto (verificato). Anche `--limit 3` e `--limit 8` sono stati ignorati nella ricerca non filtrata (restituiti 32 ogni volta); `--prefix` funziona. DOCS 4/5: SKILL.md è breve e accurato sulla forma del comando, e l'affermazione di oltre 200 librerie / Iconify è vera. Perde un punto perché il flag `--limit` documentato non funziona, il difetto di iniezione del fill non è documentato, e la tabella MCP a 8 strumenti è presentata come disponibile ma è inverificabile dal documento (nessun link al repo upstream, nessun README nella directory della skill). VERDETTO setup piuttosto che pass: i gate numerici sono soddisfatti (20 totali, install 5, trigger 5, outputMeasured true), ma il deliverable principale richiede una correzione manuale su ogni chiamata `get`, il che è un vero attrito per ogni utilizzo.
Testato il: 2026-07-21 · Claude Code 2.x (agent harness)
Installazione
npm install -g better-icons # or: bun add -g better-icons # (or skip the install and prefix every command with npx/bunx) mkdir -p ~/.claude/skills/better-icons curl -sL https://raw.githubusercontent.com/dtsola/xiaoyaosearch/HEAD/.claude/skills/better-icons/SKILL.md \ -o ~/.claude/skills/better-icons/SKILL.md # verify better-icons search settings --prefix lucide better-icons get lucide:settings # REQUIRED post-step: the CLI injects fill= onto child elements, which fills # outline icons solid. Strip it: better-icons get lucide:settings | sed -E 's/(<(path|circle|rect|line|polyline|polygon)) fill="[^"]*"/\1/g'
Comandi e prompt di esempio
/better-iconsCLI per cercare oltre 200 set di icone Iconify e recuperare SVG; l'output richiede l'eliminazione degli attributi fill
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
Find a shopping cart icon for this buttonSearch for a settings gear icon in IconifyGet the SVG for this Material icon