Better Icons

CLI pour rechercher plus de 200 jeux d'icônes Iconify et récupérer des SVG ; la sortie nécessite la suppression des attributs de remplissage

par dtsola · dtsola/xiaoyaosearch

Fonctionne avec configuration ★ 8.0/10

Better Icons — CLI pour rechercher plus de 200 jeux d'icônes Iconify et récupérer des SVG ; la sortie nécessite la suppression des attributs de remplissage

Ce que fait

Enveloppe la CLI npm `better-icons` afin que Claude puisse rechercher parmi plus de 200 collections d'icônes Iconify (lucide, mdi, tabler, heroicons, phosphor, solar) et récupérer des SVG d'icônes par ID `prefix:name`. Se déclenche lorsqu'une tâche implique de trouver, choisir ou ajouter des icônes à un projet plutôt que d'écrire manuellement des chemins SVG de mémoire. Documente les flags CLI plus un serveur MCP optionnel exposant des outils de recherche, de récupération par lots, de recommandation et d'analyse de projet.

Rapport de test

INSTALL 5/5 : le frontmatter est parsé avec name+description ; le corps ne référence aucun fichier local, seulement le package npm et l'API Iconify — vérification ponctuelle de registry.npmjs.org/better-icons (200, dernière version 1.0.4, binaire présent), api.iconify.design/search (200), api.iconify.design/lucide/settings.svg (200). Pas de chemins codés en dur, pas de curl|sh, pas de base64, pas d'exfiltration de secrets, pas de texte d'injection. Note de provenance : il s'agit d'une copie fournie — l'auteur en amont est better-auth/better-icons, pas dtsola. DÉCLENCHEMENT 5/5, tous jugés correctement. DEVRAIT se déclencher : "J'ai besoin d'une bonne icône de corbeille/suppression pour cette barre d'outils, trouve-m'en une" (oui) ; "Quels jeux d'icônes ont une icône de cloche remplie ? Donne-moi le SVG" (oui) ; "Ajouter une icône d'engrenage de paramètres au composant de la barre latérale Vue" (oui). NE DEVRAIT PAS : "Générer une icône/logo d'application pour mon application macOS en 1024x1024" (non — génération de logo, pas recherche de bibliothèque) ; "favicon.ico renvoie 404 en production" (non — bug de service d'actif statique). Mise en garde : la clause d'ouverture "Use when working with icons in any project" est trop large ; seule la deuxième phrase empêche le cas 4 de se déclencher faussement. SORTIE 6/10, réellement mesurée. Tâche : fournir des SVG `search` + `settings` de 24px en ligne à partir d'un ensemble cohérent pour une application Vue. BASELINE (frontmatter seulement) : j'ai trouvé `search` de mémoire mais je n'ai PAS pu me souvenir du chemin `settings` de Lucide et j'aurais dû le tronquer ou revenir à l'ajout d'une dépendance lucide-vue-next. COMPÉTENCE : `npx better-icons@1.0.4 search settings --prefix lucide` puis `get` a renvoyé la géométrie exacte en amont — un réel gain sur ce que la base de référence n'a pas réussi. MAIS la CLI injecte `fill="currentColor"` (ou la valeur de `--color`) sur les éléments enfant path/circle à l'intérieur d'un `<g fill="none">`, ce que l'Iconify en amont ne fait pas. J'ai rastérisé les deux avec rsvg-convert : icône de recherche CLI = 46,1% de pixels sombres vs 19,4% en amont ; visuellement, la loupe rend un disque solide et l'engrenage un blob sans caractéristiques sans trou central. Donc, suivre strictement la compétence livre des icônes de contour cassées pour la plupart des collections qu'elle recommande elle-même. Un sed d'une ligne supprimant les attributs de remplissage enfant restaure le rendu correct (vérifié). De plus, `--limit 3` et `--limit 8` ont tous deux été ignorés lors de la recherche non filtrée (renvoyant 32 à chaque fois) ; `--prefix` fonctionne. DOCS 4/5 : SKILL.md est court et précis sur la forme de la commande, et l'affirmation des plus de 200 bibliothèques / Iconify est vraie. Perd un point car le flag `--limit` documenté ne fonctionne pas, le défaut d'injection de remplissage n'est pas documenté, et le tableau MCP à 8 outils est présenté comme disponible mais est invérifiable à partir du document (pas de lien vers le dépôt en amont, pas de README dans le répertoire de la compétence). VERDICT configuration plutôt que réussite : les seuils numériques sont atteints (20 au total, installation 5, déclenchement 5, outputMeasured true), mais le livrable principal nécessite une correction manuelle à chaque appel `get`, ce qui représente une réelle friction par utilisation.

Testé le: 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'

Commandes et exemples de prompts

  • /better-iconsCLI pour rechercher plus de 200 jeux d'icônes Iconify et récupérer des SVG ; la sortie nécessite la suppression des attributs de remplissage

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

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