fix: bring build-icons into the GalsenDev website

[hakimLyon]

close: #66

Plan de Test

J'ai créé un fichier ./other/build-icons.mts qui génère la sprite sheet SVG.

Icônes

Vous trouverez des SVG bruts dans le répertoire ./other/svg-icons. Ceux-ci sont ensuite compilés en une sprite en utilisant le script npm run build:icons, qui génère le fichier sprite.svg et un fichier type name.d.ts dans le repertoire types qui permet à TypeScript de récupérer les noms des icônes.

Vous pouvez utiliser Sly pour ajouter de nouvelles icônes depuis la ligne de commande.

Pour ajouter les icônes trash, pencil-1 et avatar, exécutez :

npx sly add @radix-ui/icons trash pencil-1 avatar

Si vous ne spécifiez pas les icônes, Sly affichera une liste interactive de toutes les icônes disponibles dans la collection @radix-ui/icons et vous permettra de sélectionner celles que vous souhaitez ajouter.

Sly a été configuré pour ajouter automatiquement les icônes dans le répertoire ./other/svg-icons et pour exécuter automatiquement le script npm run build:icons, donc aucune étape supplémentaire n'est nécessaire. Vous pouvez voir la configuration dans le fichier ./other/sly/sly.json.

Points à noter

• Sly ne nécessite aucune reconfiguration pour continuer à fonctionner de cette manière.
• J'ai ajouter une dépendance de développement node-html-parser. Je préfère cette approche pour sa robustesse et sa flexibilité, mais il serait possible de la remplacer par un ensemble de correspondances regex pour transformer le SVG en tant que chaîne (en symboles pour la sprite sheet), si vous le préférez.

[NDOY3M4N]

Waouw, avec ce refactoring les icones vont se charger plus rapidement. TIL symbol element utilisé dans les SVG. Good job 🔥 🔥 🔥

[hakimLyon]

Could you also add the icons from the StatsSection component to the sprite?

Sure 👍🏿