SVG → Vue
Emballe n'importe quel SVG dans un composant monofichier .vue — ou récupère juste le bloc template pour un composant que tu as déjà.
ou clique pour parcourir — SVG uniquement
Le nom du composant vient du nom de fichier. Le bloc script ne fait que nommer le composant — supprime-le si tu n'en as pas besoin.
Juste le balisage, à coller dans un composant que tu as déjà. Si le SVG contenait un élément style, son CSS se trouve dans le bloc style du fichier ci-dessus, pas ici.
aucun renommage nécessaire
Les templates Vue sont analysés comme du HTML : un SVG peut donc y entrer exactement tel qu'il a été écrit. stroke-width reste stroke-width, class reste class, et un attribut style en ligne continue de fonctionner. La conversion se résume surtout à emballer le fichier — d'où une sortie très proche de l'entrée.
Le reste est assuré par la transmission des attributs. Avec un seul élément racine, tout ce que tu poses sur le composant atterrit sur la balise svg : width, class ou un gestionnaire de clic fonctionnent sans déclarer la moindre prop.
trois étapes
Choisis un fichier .svg — il reste sur ton appareil.
Un fichier .vue complet, ou juste le template.
Importe-le comme n'importe quel composant et dimensionne-le de l'extérieur.
réponses rapides
Parce que tu n'en as pas besoin. Un composant à racine unique transmet directement à la balise svg tout attribut que tu lui donnes : width, height, class et les écouteurs d'événements fonctionnent déjà. Ne déclare des props que si tu veux calculer quelque chose à partir d'elles.
Uniquement à donner un nom au composant, nom qui apparaît dans les devtools Vue et dans les messages d'avertissement. Le composant s'affiche à l'identique sans lui : le supprimer est parfaitement sûr.
Dans le bloc style scoped en bas du composant. Vue supprime les balises style et script trouvées dans un template : un SVG exporté d'Illustrator ou de Figma — qui embarque presque toujours une feuille de style interne — s'afficherait sinon sans aucune couleur. Sortir le CSS le garde fonctionnel, et scoped l'empêche de déborder sur le reste de ton application.
Remplace le fill ou le stroke codé en dur par currentColor et définis la couleur en CSS sur un parent. Le changeur de couleurs SVG peut basculer toutes les couleurs du fichier sur currentColor avant la conversion.
Pour cette sortie, oui — script setup et defineOptions sont des fonctionnalités de Vue 3. Sous Vue 2, le bloc template reste utilisable : colle-le dans le template d'un composant classique en API options.
Non. La conversion est un simple traitement de chaîne effectué dans ton navigateur.