Better Icons

CLI om 200+ Iconify icon sets te doorzoeken en SVG's op te halen; output moet fill attrs gestript hebben

Werkt met setup ★ 8.0/10

Wat het doet

Wrapt de `better-icons` npm CLI zodat Claude meer dan 200 Iconify icon-collecties (lucide, mdi, tabler, heroicons, phosphor, solar) kan doorzoeken en icon-SVG's kan ophalen via `prefix:name` id. Activeert wanneer een taak het vinden, kiezen of toevoegen van iconen aan een project omvat, in plaats van handmatig SVG-paden uit het geheugen te schrijven. Documenteert de CLI-vlaggen plus een optionele MCP-server die zoek-, batch-get-, aanbevelings- en project-scan-tools exposeert.

Testrapport

INSTALL 5/5: frontmatter parset met name+description; body verwijst niet naar lokale bestanden, alleen naar het npm-pakket en de Iconify API — steekproefsgewijs gecontroleerd registry.npmjs.org/better-icons (200, nieuwste 1.0.4, bin aanwezig), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). Geen hardgecodeerde paden, geen curl|sh, geen base64, geen geheime exfil, geen injectietekst. Opmerking herkomst: dit is een vendored kopie — upstream auteur is better-auth/better-icons, niet dtsola. TRIGGER 5/5, allemaal correct beoordeeld. MOET activeren: "I need a good trash/delete icon for this toolbar, find me one" (ja); "What icon sets have a filled bell icon? Give me the SVG" (ja); "Add a settings gear icon to the Vue sidebar component" (ja). MOET NIET: "Generate an app icon/logo for my macOS app at 1024x1024" (nee — logo generatie, geen bibliotheek lookup); "favicon.ico 404s in production" (nee — statische-asset serving bug). Kanttekening: de openingszin "Use when working with icons in any project" is te breed; alleen de tweede zin voorkomt dat case 4 vals activeert. OUTPUT 6/10, echt gemeten. Taak: lever inline 24px `search` + `settings` SVG's uit één consistente set voor een Vue-app. BASELINE (alleen frontmatter): Ik had `search` uit het geheugen correct, maar kon Lucide's `settings`-pad NIET herinneren en had het moeten afkappen of moeten terugvallen op het toevoegen van een lucide-vue-next afhankelijkheid. SKILL: `npx better-icons@1.0.4 search settings --prefix lucide` en daarna `get` retourneerde de exacte upstream geometrie — echte winst op het punt waar de baseline faalde. MAAR de CLI injecteert `fill="currentColor"` (of de waarde van `--color`) op kind-pad/cirkel-elementen binnen een `<g fill="none">`, wat upstream Iconify niet doet. Ik rasteriseerde beide met rsvg-convert: CLI search icon = 46.1% donkere pixels versus upstream 19.4%; visueel rendert het vergrootglas als een solide schijf en het tandwiel als een kenmerkloze blob met geen middengat. Dus het strikt volgen van de skill levert kapotte outline-iconen voor de meeste collecties die het zelf aanbeveelt. Een éénregelige sed die kind-fill-attrs stript, herstelt de correcte weergave (geverifieerd). Ook `--limit 3` en `--limit 8` werden beide genegeerd bij ongefilterd zoeken (retourneerde elke keer 32); `--prefix` werkt. DOCS 4/5: SKILL.md is kort en accuraat over de commando-vorm, en de claim van 200+ bibliotheken / Iconify is waar. Verliest een punt omdat de gedocumenteerde `--limit`-vlag niet werkt, het fill-injectie defect ongedocumenteerd is, en de 8-tool MCP-tabel wordt gepresenteerd als beschikbaar maar is onverifieerbaar vanuit de doc (geen link naar de upstream repo, geen README in de skill-map). VERDICT setup in plaats van pass: numerieke drempels zijn gehaald (20 totaal, install 5, trigger 5, outputMeasured true), maar de kernlevering vereist een handmatige correctie bij elke `get`-oproep, wat echte wrijving per gebruik is.

Getest op: 2026-07-21 · Claude Code 2.x (agent harness)

Installatie

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'

Commando's en voorbeeldprompts

/better-iconsCLI om 200+ Iconify icon sets te doorzoeken en SVG's op te halen; output moet fill attrs gestript hebben

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

Find a shopping cart icon for this button
Search for a settings gear icon in Iconify
Get the SVG for this Material icon

Volledig rapport (Engels) →