Closed hakimLyon closed 9 months ago
Waouw, avec ce refactoring les icones vont se charger plus rapidement. TIL symbol element utilisé dans les SVG. Good job 🔥 🔥 🔥
Could you also add the icons from the
StatsSection
component to the sprite?
Sure 👍🏿
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 scriptnpm run build:icons
, qui génère le fichiersprite.svg
et un fichier typename.d.ts
dans le repertoiretypes
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
etavatar
, 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 scriptnpm 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
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.