Better Icons

CLI för att söka i 200+ Iconify-ikonuppsättningar och hämta SVG:er; utdata behöver fill-attribut strippas

Fungerar med konfiguration ★ 8.0/10

Vad den gör

Wrappar `better-icons` npm CLI så att Claude kan söka bland 200+ Iconify-ikonkollektioner (lucide, mdi, tabler, heroicons, phosphor, solar) och hämta ikon-SVG:er med `prefix:name`-ID. Utlöses när en uppgift involverar att hitta, välja eller lägga till ikoner i ett projekt snarare än att handskriva SVG-sökvägar från minnet. Dokumenterar CLI-flaggorna plus en valfri MCP-server som exponerar sök-, batch-get-, rekommendations- och projekt-skanningsverktyg.

Testrapport

INSTALL 5/5: frontmatter parsas med name+description; brödtexten refererar inga lokala filer, endast npm-paketet och Iconify API — stickprovskontrollerade registry.npmjs.org/better-icons (200, senaste 1.0.4, bin finns), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). Inga hårdkodade sökvägar, ingen curl|sh, ingen base64, ingen hemlig exfil, ingen injektionstext. Obs proveniens: detta är en levererad kopia — uppströms författare är better-auth/better-icons, inte dtsola. TRIGGER 5/5, alla bedömda korrekt. SKA utlösas: "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). SKA INTE: "Generate an app icon/logo for my macOS app at 1024x1024" (nej — logotypgenerering, inte biblioteksuppslagning); "favicon.ico 404s in production" (nej — statisk tillgångsfel). Förbehåll: den inledande klausulen "Use when working with icons in any project" är för bred; endast den andra meningen hindrar fall 4 från att falskt utlösas. OUTPUT 6/10, verkligen mätt. Uppgift: tillhandahålla inline 24px `search` + `settings` SVG:er från en konsekvent uppsättning för en Vue-app. BASLINJE (endast frontmatter): Jag fick `search` rätt från minnet men kunde INTE komma ihåg Lucides `settings`-sökväg och skulle ha behövt trunkera den eller falla tillbaka på att lägga till ett lucide-vue-next-beroende. SKICKLIGHET: `npx better-icons@1.0.4 search settings --prefix lucide` sedan `get` returnerade den exakta uppströmsgeometrin — verklig vinst på det som baslinjen misslyckades med. MEN CLI injicerar `fill="currentColor"` (eller `--color`:s värde) på underordnade path/circle-element inuti en `<g fill="none">`, vilket uppströms Iconify inte gör. Jag rasteriserade båda med rsvg-convert: CLI search-ikon = 46.1% mörka pixlar vs uppströms 19.4%; visuellt renderas förstoringsglaset som en solid skiva och kugghjulet som en funktionslös klump utan centrumhål. Så att strikt följa skickligheten levererar trasiga konturikoner för de flesta av de samlingar den själv rekommenderar. En enradig sed som strippar underordnade fill-attribut återställer korrekt rendering (verifierat). Även `--limit 3` och `--limit 8` ignorerades båda vid ofiltrerad sökning (returnerade 32 varje gång); `--prefix` fungerar. DOCS 4/5: SKILL.md är kort och korrekt om kommandoformen, och påståendet om 200+ bibliotek / Iconify är sant. Förlorar en poäng eftersom den dokumenterade `--limit`-flaggan inte fungerar, fill-injektionsdefekten är odokumenterad, och 8-verktygs MCP-tabellen presenteras som tillgänglig men är overifierbar från dokumentet (ingen länk till uppströms repo, ingen README i skicklighetskatalogen). DOM: inställning snarare än godkänd: numeriska gränser uppfylls (20 totalt, install 5, trigger 5, outputMeasured true), men kärnleveransen behöver en manuell korrigering vid varje `get`-anrop, vilket är verklig friktion per användning.

Testad: 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'

Kommandon och exempelprompter

/better-iconsCLI för att söka i 200+ Iconify-ikonuppsättningar och hämta SVG:er; utdata behöver fill-attribut strippas

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →