Better Icons

CLI para buscar más de 200 conjuntos de iconos de Iconify y obtener SVGs; la salida necesita atributos fill eliminados

Por dtsola · dtsola/xiaoyaosearch

Funciona con configuración ★ 8.0/10

Better Icons — CLI para buscar más de 200 conjuntos de iconos de Iconify y obtener SVGs; la salida necesita atributos fill eliminados

Qué hace

Envuelve la CLI npm `better-icons` para que Claude pueda buscar en más de 200 colecciones de iconos de Iconify (lucide, mdi, tabler, heroicons, phosphor, solar) y recuperar SVGs de iconos por ID `prefix:name`. Se activa cuando una tarea implica encontrar, elegir o añadir iconos a un proyecto en lugar de escribir rutas SVG a mano desde la memoria. Documenta las banderas de la CLI más un servidor MCP opcional que expone herramientas de búsqueda, obtención por lotes, recomendación y escaneo de proyectos.

Informe de la prueba

INSTALACIÓN 5/5: el frontmatter se analiza con name+description; el cuerpo no referencia archivos locales, solo el paquete npm y la API de Iconify — se verificó registry.npmjs.org/better-icons (200, última 1.0.4, bin presente), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). Sin rutas codificadas, sin curl|sh, sin base64, sin exfiltración de secretos, sin texto de inyección. Nota de procedencia: esta es una copia vendida — el autor original es better-auth/better-icons, no dtsola. DISPARADOR 5/5, todos juzgados correctamente. DEBERÍA activarse: "I need a good trash/delete icon for this toolbar, find me one" (sí); "What icon sets have a filled bell icon? Give me the SVG" (sí); "Add a settings gear icon to the Vue sidebar component" (sí). NO DEBERÍA: "Generate an app icon/logo for my macOS app at 1024x1024" (no — generación de logo, no búsqueda en librería); "favicon.ico 404s in production" (no — error de servicio de activos estáticos). Advertencia: la cláusula inicial "Use when working with icons in any project" es demasiado amplia; solo la segunda oración evita que el caso 4 se active falsamente. SALIDA 6/10, genuinamente medida. Tarea: proporcionar SVGs `search` + `settings` de 24px en línea de un conjunto consistente para una aplicación Vue. LÍNEA BASE (solo frontmatter): recordé `search` correctamente pero NO pude recordar la ruta de `settings` de Lucide y habría tenido que truncarla o recurrir a añadir una dependencia lucide-vue-next. HABILIDAD: `npx better-icons@1.0.4 search settings --prefix lucide` y luego `get` devolvió la geometría exacta del upstream — una victoria real en lo que la línea base falló. PERO la CLI inyecta `fill="currentColor"` (o el valor de `--color`) en los elementos path/circle hijos dentro de un `<g fill="none">`, lo que el upstream de Iconify no hace. Rastericé ambos con rsvg-convert: el icono de búsqueda de la CLI = 46.1% de píxeles oscuros vs 19.4% del upstream; visualmente la lupa se renderiza como un disco sólido y el engranaje como un blob sin características sin agujero central. Así que seguir la habilidad estrictamente envía iconos de contorno rotos para la mayoría de las colecciones que ella misma recomienda. Un sed de una línea que elimina los atributos fill hijos restaura la renderización correcta (verificado). Además, `--limit 3` y `--limit 8` fueron ignorados en la búsqueda sin filtrar (devolvieron 32 cada vez); `--prefix` funciona. DOCUMENTACIÓN 4/5: SKILL.md es corto y preciso sobre la forma del comando, y la afirmación de más de 200 librerías / Iconify es cierta. Pierde un punto porque la bandera `--limit` documentada no funciona, el defecto de inyección de fill no está documentado, y la tabla MCP de 8 herramientas se presenta como disponible pero es inverificable desde el documento (sin enlace al repositorio upstream, sin README en el directorio de la habilidad). VEREDICTO configuración en lugar de aprobado: se cumplen los umbrales numéricos (20 en total, instalación 5, disparador 5, outputMeasured true), pero el entregable principal necesita una corrección manual en cada llamada `get`, lo que es una fricción real por uso.

Probado el: 2026-07-21 · Claude Code 2.x (agent harness)

Instalación

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'

Comandos y prompts de ejemplo

  • /better-iconsCLI para buscar más de 200 conjuntos de iconos de Iconify y obtener SVGs; la salida necesita atributos fill eliminados

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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