Convertir un SVG en composant SolidJS

Créez des composants d’icônes SolidJS à partir de code SVG. Le résultat respecte les conventions d’attributs de Solid, type les props avec JSX.SvgSVGAttributes et reste réactif.

En quoi Solid diffère de React

Le JSX de Solid applique les attributs directement au DOM : les attributs SVG comme stroke-width et class restent donc exactement tels qu’ils figurent dans le fichier. Inutile de les renommer en camelCase ou en className comme avec React.

Dans Solid, les props sont des getters réactifs, et les déstructurer casse la réactivité. Lorsque vous activez la prop size, le convertisseur utilise splitProps pour séparer size des autres props et transmet le reste au <svg>, de sorte que toutes les valeurs restent réactives.

Types TypeScript générés

Les props sont typées JSX.SvgSVGAttributes<SVGSVGElement>, importé de solid-js, qui couvre tous les attributs SVG et gestionnaires d’événements. Avec l’option size, le type est étendu avec { size?: number | string }.

Utiliser le composant dans SolidStart

Pour commencer :

Enregistrez le résultat sous IconName.tsx dans votre dossier src/components.
Importez-le et affichez <IconName size={18} class="icon" />.
Utilisez currentColor pour hériter de la couleur du texte environnant.
Les refs passent par la prop ref habituelle ; forwardRef n’est pas nécessaire avec Solid.

Questions fréquentes

Pourquoi les attributs ne passent-ils pas en camelCase pour Solid ?

Solid définit les attributs directement sur les éléments du DOM, où les attributs SVG sont sensibles à la casse et écrits avec des traits d’union. Conserver les noms d’origine est l’option la plus fiable.

forwardRef et memo s’appliquent-ils à Solid ?

Non. Les composants Solid ne s’exécutent qu’une fois et reçoivent les refs comme des props ordinaires : ces options propres à React sont donc ignorées lorsque Solid est sélectionné.

Le composant reste-t-il réactif ?

Oui. Le convertisseur ne déstructure jamais les props : il utilise splitProps pour la prop size et la lit via local.size, ce qui propage les mises à jour sans recréer l’élément.

Puis-je utiliser le résultat avec Astro ?

Oui. Astro prend en charge les composants Solid via l’intégration @astrojs/solid-js, et l’icône est rendue côté serveur sans envoyer de JavaScript, sauf si vous l’hydratez.