@web-portfolio/icônes

Cela a commencé comme un ensemble d'icônes pour un site de portfolio personnel, et s'est transformé en quelque chose qui mérite d'être publié à part : pas de police d'icônes, aucune requête CDN au moment de l'exécution, rien à charger de manière asynchrone. Tout est inclus dans le paquet et se rend instantanément.

icons.getresume.devicons.getresume.dev— effectuez une recherche par nom ou par catégorie, essayez les contrôles de couleur/contour/taille pour n'importe quelle icône, et copiez le fragment<Icon />ou le code SVG brut directement depuis la page.

Pourquoi cela existe.

La création d'un portfolio ou d'un tableau de bord implique généralement l'une des deux choses : intégrer une police de caractères contenant quelques glyphes, ou disperser<img src="...">dans tout le code source, pointant vers un CDN qui peut ou non être disponible au moment où cela compte. Aucune de ces solutions ne semblait appropriée pour quelque chose d'aussi simple que "afficher le logo React à côté du mot React". Ce paquet est une alternative :<Icon name="react" />, c'est fait, et le même composant fonctionne, que vous ayez besoin d'un badge indiquant la pile technologique, d'une icône de lien social ou simplement d'une flèche pour un bouton de carrousel.

Quelques éléments qu'il fait intentionnellement.

• registry[name] effectue une recherche au moment du rendu, ce qui vous évite d'avoir des lignes comme `import { ReactIcon, DockerIcon, PostgresIcon } from '...'` en haut de chaque fichier. registry[name]effectue une recherche au moment du rendu, ce qui vous évite d'avoirimport { ReactIcon, DockerIcon, PostgresIcon } from '...'en haut de chaque fichier.
• Rien n'est chargé au moment de l'exécution.L'ensemble du registre est intégré lors de la compilation et optimisé avec SVGO, ce qui signifie qu'il n'y a pas de phase de chargement, aucun décalage de mise en page pendant le chargement d'une image, et cela fonctionne hors ligne.
• Personnalisable là où cela a du sens. colorcouleurcouleur, contour, etl'épaisseur du traitprops recolor monochrome icons to match your palette; brand marks that are supposed to stay a specific color (the React logo's blue, for instance) are left alone on purpose.
• Prêt à l'emploi dès la sortie de la boîte.Pas de@types/séparé dont il faut se souvenir d'installer.

Installation.

npm install @web-portfolio/icons

pnpm ajouter @web-portfolio/icons

yarn add @web-portfolio/icons

Nécessite React version 18 ou ultérieure.

Un registre, deux paquets publiés, une galerie statique.

Le paquet publié est une partie d'un monorepo comprenant quatre paquets et deux applications. Le dossier `packages/db` contient un schéma Drizzle utilisant Turso/libSQL ; c'est la seule partie qui interagit avec une base de données, et ce uniquement depuis l'application `apps/admin` (un tableau de bord CRUD protégé par des identifiants) et les scripts d'initialisation. Le dossier `packages/core` est privé et interne : il contient l'étape de construction `generate-registry` ainsi que le fichier regroupé `registry.generated.ts`, qui sont utilisés par tous les paquets publiés. Le dossier `packages/react` correspond au paquet `@web-portfolio/icons` ; le dossier `packages/sanity-plugin` correspond au paquet `@web-portfolio/icons-sanity`, un sélecteur pour Studio. L'application `apps/gallery`, qui est le site public accessible à l'adresse icons.getresume.dev, utilise également ce même registre et est stylisée selon les principes de techicons.dev.

Convertir un fichier SVG copié-collé en une entrée de registre.

generate-registry.ts est le fichier qui génère réellement registry.generated.ts : il extrait les données SVG brutes de chaque icône depuis Turso, les traite avec SVGO (avec plusieurs passages, en utilisant la configuration par défaut et en différant la suppression de viewBox car celui-ci est divisé et conservé intentionnellement), puis les réécrit dans une entrée compacte {viewBox, innerHTML}. Cette réécriture ne s'applique qu'aux icônes des catégories monochrome — les variantes "plain"/"line" de devicon, Material Symbols et Simple Icons —, en remplaçant toutes les valeurs de remplissage/contour codées en dur par currentColor afin que la propriété <Icon color> ait un effet réel. Les catégories d'icônes avec des couleurs (les variantes "original"/"original-wordmark" de devicon) passent cette étape, ce qui signifie que le bleu de React ou le vert turquoise de Docker ne sont jamais aplaties à la couleur du texte environnante.

# one-time: schema + all three icon sources
pnpm --filter @web-portfolio/icons-db db:migrate
pnpm --filter @web-portfolio/icons-db seed-all

# SVGO + currentColor normalization -> packages/core/src/registry.generated.ts
pnpm generate-registry

D'où viennent réellement ces 633 icônes ?

Trois sources de licences différentes, chacune étant attribuée et alimentée par son propre script : devicon (MIT) fournit 578 logos technologiques/d'outils. Material Symbols (Apache-2.0) fournit 38 éléments — 34 glyphes d'interface utilisateur/de navigation courants plus 4 symboles génériques (Éclair, Traduire, Liste de contrôle, Cadeau) qui ont remplacé les images PNG des symboles SF d'Apple que le site web utilisait auparavant, et dont la redistribution n'était pas autorisée dans un package sous licence ouverte. Simple Icons (CC0) fournit les 17 éléments restants — 12 logos de plateformes sociales que devicon ne couvre pas, et 5 marques d'outils pour développeurs (MCP, Google Analytics, LangChain, Ollama, Pydantic).

Toutes les icônes demandées ne disposent pas d'une source autorisée – Segment, Statsig et Google Stitch ne sont référencés dans aucun des trois (Stitch est postérieur à toutes leurs dernières versions). Plutôt que de récupérer un élément graphique sans licence de redistribution claire, ceux-ci sont ajoutés manuellement via le flux "coller le code SVG brut" dans les applications/l'administration, par la personne qui les ajoute, et non par le système automatisé.

Chaque icône dans le registre peut indiquer précisément sa provenance et la licence associée à cette source, ce qui a plus de valeur que l'ajout d'un simple logo.