Better Icons

CLI for å søke i 200+ Iconify ikonsett og hente SVG-er; utdata trenger fill-attributter fjernet

Krever oppsett ★ 8.0/10

Hva den gjør

Wrapper `better-icons` npm CLI slik at Claude kan søke på tvers av 200+ Iconify ikonkolleksjoner (lucide, mdi, tabler, heroicons, phosphor, solar) og hente ikon-SVG-er etter `prefix:name` id. Utløses når en oppgave involverer å finne, velge eller legge til ikoner i et prosjekt i stedet for å håndskrive SVG-stier fra minnet. Dokumenterer CLI-flaggene pluss en valgfri MCP-server som eksponerer søk, batch-get, anbefaling og prosjekt-skanning verktøy.

Testrapport

INSTALL 5/5: frontmatter parses med name+description; kroppen refererer ingen lokale filer, kun npm-pakken og Iconify API — stikkprøvekontrollerte registry.npmjs.org/better-icons (200, nyeste 1.0.4, bin til stede), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). Ingen hardkodede stier, ingen curl|sh, ingen base64, ingen hemmelig eksfil, ingen injeksjonstekst. Merk herkomst: dette er en videresolgt kopi — oppstrømsforfatter er better-auth/better-icons, ikke dtsola. TRIGGER 5/5, alle korrekt vurdert. BØR utløses: "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). BØR IKKE: "Generate an app icon/logo for my macOS app at 1024x1024" (nei — logogenerering, ikke bibliotekoppslag); "favicon.ico 404s in production" (nei — statisk-ressurs-serveringsfeil). Forbehold: den innledende klausulen "Use when working with icons in any project" er for bred; kun den andre setningen hindrer sak 4 fra å feilutløses. OUTPUT 6/10, genuint målt. Oppgave: levere inline 24px `search` + `settings` SVG-er fra ett konsistent sett for en Vue-app. GRUNNLINJE (kun frontmatter): Jeg fikk `search` riktig fra minnet, men kunne IKKE huske Lucides `settings`-sti og måtte ha forkortet den eller falt tilbake til å legge til en lucide-vue-next-avhengighet. FERDIGHET: `npx better-icons@1.0.4 search settings --prefix lucide` deretter `get` returnerte den nøyaktige oppstrømsgeometrien — en reell gevinst på det grunnlinjen feilet på. MEN CLI injiserer `fill="currentColor"` (eller `--color`s verdi) på underordnede path/circle-elementer inne i en `<g fill="none">`, noe oppstrøms Iconify ikke gjør. Jeg rasteriserte begge med rsvg-convert: CLI søkeikon = 46.1% mørke piksler vs oppstrøms 19.4%; visuelt gjengis forstørrelsesglasset som en solid disk og giret som en funksjonsløs klump uten senterhull. Så å følge ferdigheten strengt sender ødelagte omrissikoner for de fleste samlingene den selv anbefaler. En enlinjes sed som fjerner underordnede fill-attributter gjenoppretter korrekt gjengivelse (verifisert). Også `--limit 3` og `--limit 8` ble begge ignorert på ufiltrert søk (returnerte 32 hver gang); `--prefix` fungerer. DOKUMENTASJON 4/5: SKILL.md er kort og nøyaktig på kommandoform, og påstanden om 200+ biblioteker / Iconify er sann. Mister et poeng fordi det dokumenterte `--limit`-flagget ikke fungerer, fill-injeksjonsdefekten er udokumentert, og den 8-verktøys MCP-tabellen presenteres som tilgjengelig, men er uverifiserbar fra dokumentet (ingen lenke til oppstrøms repo, ingen README i ferdighetskatalogen). DOM: oppsett snarere enn bestått: numeriske porter er oppfylt (20 totalt, install 5, trigger 5, outputMeasured true), men kjerneleveransen trenger en manuell korreksjon på hvert `get`-kall, noe som er reell friksjon per bruk.

Testet på: 2026-07-21 · Claude Code 2.x (agent harness)

Installer

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'

Kommandoer og eksempelprompter

/better-iconsCLI for å søke i 200+ Iconify ikonsett og hente SVG-er; utdata trenger fill-attributter fjernet

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

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

Full rapport →