Convertir un SVG en composant Vue
Collez un SVG et obtenez un composant Vue 3 (.vue) à fichier unique, prêt à être importé dans votre projet, avec propagation automatique des attributs (class, style, taille) au parent.
Pourquoi transformer un SVG en composant Vue plutôt que de l'importer tel quel ?
Un composant Vue dédié à une icône permet de la réutiliser facilement partout dans un projet, de lui passer des classes ou styles (couleur, taille) depuis n'importe quel composant parent, et de bénéficier de la coloration/vérification de votre éditeur comme pour n'importe quel autre composant Vue.
Vue nécessite-t-il de convertir les attributs en camelCase comme React ?
Non, contrairement à React/JSX, les templates Vue acceptent nativement les attributs kebab-case (stroke-width, fill-rule...) tels quels : aucune conversion d'attribut n'est donc nécessaire, seul un ajout de v-bind="$attrs" est fait pour permettre de personnaliser le composant à l'usage.
Puis-je changer la couleur de l'icône depuis le composant parent ?
Si votre SVG utilise fill="currentColor" (comme dans l'exemple), la couleur du texte CSS environnant s'applique automatiquement à l'icône : changez simplement la propriété CSS color du parent pour recolorer l'icône sans toucher au composant.
Votre fichier SVG reste privé : la conversion en composant Vue s'exécute entièrement dans votre navigateur, sans aucun envoi à un serveur.