Better Icons
CLI zum Durchsuchen von über 200 Iconify-Icon-Sets und Abrufen von SVGs; Ausgabe benötigt entfernte Füllattribute
Funktioniert mit Setup
Was es kann
Umschließt die `better-icons` npm CLI, damit Claude über 200+ Iconify-Icon-Sammlungen (lucide, mdi, tabler, heroicons, phosphor, solar) suchen und Icon-SVGs nach `prefix:name` ID abrufen kann. Wird ausgelöst, wenn eine Aufgabe das Finden, Auswählen oder Hinzufügen von Icons zu einem Projekt beinhaltet, anstatt SVG-Pfade aus dem Gedächtnis zu schreiben. Dokumentiert die CLI-Flags plus einen optionalen MCP-Server, der Such-, Batch-Get-, Empfehlungs- und Projekt-Scan-Tools bereitstellt.
Testbericht
INSTALL 5/5: frontmatter wird mit name+description geparst; der Text referenziert keine lokalen Dateien, nur das npm-Paket und die Iconify API — stichprobenartig überprüft registry.npmjs.org/better-icons (200, neueste 1.0.4, bin vorhanden), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). Keine fest codierten Pfade, kein curl|sh, kein base64, keine geheime Exfiltration, kein Injection-Text. Herkunftshinweis: Dies ist eine vendored Kopie — der Upstream-Autor ist better-auth/better-icons, nicht dtsola. TRIGGER 5/5, alle korrekt bewertet. SOLLTE auslösen: „Ich brauche ein gutes Mülleimer-/Löschsymbol für diese Symbolleiste, finde mir eines“ (ja); „Welche Icon-Sets haben ein gefülltes Glockensymbol? Gib mir das SVG“ (ja); „Füge ein Einstellungssymbol zur Vue-Seitenleistenkomponente hinzu“ (ja). SOLLTE NICHT: „Generiere ein App-Icon/Logo für meine macOS-App in 1024x1024“ (nein — Logo-Generierung, keine Bibliotheksabfrage); „favicon.ico 404s in production“ (nein — statischer Asset-Serving-Bug). Vorbehalt: die Eröffnungsklausel „Use when working with icons in any project“ ist zu weit gefasst; nur der zweite Satz verhindert, dass Fall 4 fälschlicherweise auslöst. OUTPUT 6/10, tatsächlich gemessen. Aufgabe: Inline 24px `search` + `settings` SVGs aus einem konsistenten Set für eine Vue-App bereitstellen. BASELINE (nur frontmatter): Ich habe `search` aus dem Gedächtnis richtig hinbekommen, konnte mich aber NICHT an Lucides `settings`-Pfad erinnern und hätte ihn kürzen oder auf das Hinzufügen einer lucide-vue-next-Abhängigkeit zurückgreifen müssen. SKILL: `npx better-icons@1.0.4 search settings --prefix lucide` dann `get` gab die exakte Upstream-Geometrie zurück — ein echter Gewinn bei dem, woran die Baseline scheiterte. ABER die CLI injiziert `fill="currentColor"` (oder den Wert von `--color`) in untergeordnete Pfad-/Kreiselemente innerhalb eines `<g fill="none">`, was Upstream Iconify nicht tut. Ich habe beide mit rsvg-convert gerastert: CLI-Suchsymbol = 46,1% dunkle Pixel vs. Upstream 19,4%; visuell rendert die Lupe als solide Scheibe und das Zahnrad als merkmalsloser Blob mit keinem Mittelloch. Das strikte Befolgen des Skills liefert also für die meisten der von ihm selbst empfohlenen Sammlungen fehlerhafte Umriss-Icons. Eine einzeilige sed-Anweisung, die untergeordnete Füllattribute entfernt, stellt die korrekte Darstellung wieder her (verifiziert). Auch `--limit 3` und `--limit 8` wurden bei ungefilterter Suche ignoriert (gaben jedes Mal 32 zurück); `--prefix` funktioniert. DOKUMENTE 4/5: SKILL.md ist kurz und präzise bezüglich der Befehlsform, und die Behauptung von über 200 Bibliotheken / Iconify ist wahr. Verliert einen Punkt, weil das dokumentierte `--limit`-Flag nicht funktioniert, der Füll-Injektionsdefekt undokumentiert ist und die 8-Tool-MCP-Tabelle als verfügbar dargestellt wird, aber aus der Dokumentation nicht überprüfbar ist (kein Link zum Upstream-Repo, keine README im Skill-Verzeichnis). URTEIL Setup statt Pass: numerische Schwellenwerte sind erfüllt (insgesamt 20, Install 5, Trigger 5, outputMeasured true), aber das Kern-Deliverable benötigt eine manuelle Korrektur bei jedem `get`-Aufruf, was eine echte Reibung pro Nutzung darstellt.
Getestet am: 2026-07-21 · Claude Code 2.x (agent harness)
Installation
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'
Befehle & Beispiel-Prompts
/better-iconsCLI zum Durchsuchen von über 200 Iconify-Icon-Sets und Abrufen von SVGs; Ausgabe benötigt entfernte Füllattribute
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
Find a shopping cart icon for this buttonSearch for a settings gear icon in IconifyGet the SVG for this Material icon