Better Icons

CLI pro vyhledávání ve 200+ sadách ikon Iconify a načítání SVG; výstup vyžaduje odstranění atributů fill

Funguje s nastavením ★ 8.0/10

Co umí

Obaluje `better-icons` npm CLI, takže Claude může prohledávat přes 200+ kolekcí ikon Iconify (lucide, mdi, tabler, heroicons, phosphor, solar) a načítat SVG ikony podle `prefix:name` id. Spouští se, když úkol zahrnuje hledání, výběr nebo přidávání ikon do projektu namísto ručního psaní SVG cest z paměti. Dokumentuje CLI flagy plus volitelný MCP server vystavující nástroje pro vyhledávání, batch-get, doporučování a skenování projektů.

Testovací report

INSTALACE 5/5: frontmatter se parsuje s name+description; tělo neodkazuje na žádné lokální soubory, pouze na npm balíček a Iconify API — namátkově zkontrolováno registry.npmjs.org/better-icons (200, nejnovější 1.0.4, bin přítomno), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). Žádné pevně zakódované cesty, žádné curl|sh, žádné base64, žádná exfiltrace tajemství, žádný injekční text. Poznámka k původu: toto je vendored kopie — upstream autor je better-auth/better-icons, nikoli dtsola. SPUŠTĚNÍ 5/5, vše správně posouzeno. MĚLO by se spustit: "I need a good trash/delete icon for this toolbar, find me one" (ano); "What icon sets have a filled bell icon? Give me the SVG" (ano); "Add a settings gear icon to the Vue sidebar component" (ano). NEMĚLO by se spustit: "Generate an app icon/logo for my macOS app at 1024x1024" (ne — generování loga, nikoli vyhledávání v knihovně); "favicon.ico 404s in production" (ne — chyba při servírování statického assetu). Poznámka: úvodní klauzule "Use when working with icons in any project" je příliš široká; pouze druhá věta zabraňuje falešnému spuštění případu 4. VÝSTUP 6/10, skutečně měřeno. Úkol: dodat inline 24px `search` + `settings` SVG z jedné konzistentní sady pro Vue aplikaci. ZÁKLAD (pouze frontmatter): `search` jsem si pamatoval správně, ale NEMOHL jsem si vzpomenout na cestu Lucide `settings` a musel bych ji zkrátit nebo se uchýlit k přidání závislosti lucide-vue-next. DOVEDNOST: `npx better-icons@1.0.4 search settings --prefix lucide` a poté `get` vrátilo přesnou upstream geometrii — skutečný zisk tam, kde základ selhal. ALE CLI vkládá `fill="currentColor"` (nebo hodnotu `--color`) do podřízených path/circle prvků uvnitř `<g fill="none">`, což upstream Iconify nedělá. Oba jsem rasterizoval pomocí rsvg-convert: ikona vyhledávání CLI = 46.1% tmavých pixelů vs upstream 19.4%; vizuálně se lupa vykresluje jako plný disk a ozubené kolo jako beztvarý blob bez středového otvoru. Takže striktní dodržování dovednosti dodává rozbité obrysové ikony pro většinu kolekcí, které sama doporučuje. Jednořádkový sed odstraňující podřízené atributy fill obnovuje správné vykreslení (ověřeno). Také `--limit 3` a `--limit 8` byly ignorovány při nefiltrovaném vyhledávání (vrátily 32 pokaždé); `--prefix` funguje. DOKUMENTACE 4/5: SKILL.md je krátký a přesný ohledně tvaru příkazů a tvrzení o 200+ knihovnách / Iconify je pravdivé. Ztrácí bod, protože dokumentovaný flag `--limit` nefunguje, vada injekce fill je nedokumentovaná a tabulka 8 nástrojů MCP je prezentována jako dostupná, ale je neověřitelná z dokumentace (žádný odkaz na upstream repo, žádné README v adresáři dovednosti). VERDIKT nastavení spíše než průchod: číselné brány jsou splněny (celkem 20, instalace 5, spuštění 5, outputMeasured true), ale základní dodávka vyžaduje manuální opravu při každém volání `get`, což je skutečné tření při každém použití.

Testováno: 2026-07-21 · Claude Code 2.x (agent harness)

Instalace

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'

Příkazy a ukázkové prompty

/better-iconsCLI pro vyhledávání ve 200+ sadách ikon Iconify a načítání SVG; výstup vyžaduje odstranění atributů fill

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →