Pourquoi Vue signale-t-il le dans mon SVG ?

Vue retire les balises des templates car elles ont des effets de bord. Déplacez le CSS dans le bloc du composant ou convertissez-le en attributs avant la conversion.

Convertir un SVG en composant Vue (SFC)

Convertir un SVG en composant monofichier Vue

Enveloppez n’importe quel SVG dans un composant monofichier Vue 3 (.vue) avec un <template> propre, un <script setup lang="ts"> optionnel et une prop size, prêt à être importé dans votre application.

À quoi ressemble le résultat Vue

Les templates Vue acceptent les attributs SVG tels quels : le convertisseur conserve donc les noms en kebab-case comme stroke-width et class. Il retire le superflu ajouté par l’éditeur, la déclaration XML et, en option, xmlns, puis place le balisage dans un bloc <template>.

Si l’option size est activée, un bloc <script setup> déclare une prop size avec une valeur par défaut et la lie à :width et :height. En TypeScript, la prop est déclarée avec defineProps<{ size?: number | string }>() et withDefaults.

Transmission automatique des attributs

Comme le <svg> est l’unique élément racine, Vue lui transmet automatiquement les attributs qui ne sont pas déclarés comme props. class, style, aria-label et les écouteurs comme @click arrivent donc sur le <svg> sans code supplémentaire. L’option de transmission des props est par conséquent inutile pour Vue.

Utiliser le composant

Utilisation typique dans un projet Vue 3 ou Nuxt :

Enregistrez le résultat sous IconName.vue dans votre dossier de composants.
Importez-le : import IconName from "./IconName.vue".
Affichez <IconName :size="20" class="text-emerald-600" /> dans n’importe quel template.
Avec currentColor activé, l’icône suit la propriété CSS color.

Questions fréquentes

Le résultat fonctionne-t-il avec Vue 2 ?

Le template fonctionne aussi avec Vue 2.7, mais <script setup> avec defineProps nécessite Vue 2.7 ou Vue 3. Pour les projets Vue 2 plus anciens, désactivez la prop size afin d’obtenir un composant composé uniquement d’un template.

Puis-je l’utiliser avec Nuxt ?

Oui. Placez le fichier dans le répertoire components et Nuxt l’importera automatiquement par son nom, par exemple <IconArrow /> pour components/IconArrow.vue.

Pourquoi Vue signale-t-il le <style> dans mon SVG ?

Vue retire les balises <style> des templates car elles ont des effets de bord. Déplacez le CSS dans le bloc <style scoped> du composant ou convertissez-le en attributs avant la conversion.

vite-svg-loader est-il une meilleure option ?

Un loader est pratique si vous importez de nombreux SVG au moment du build. Convertir en fichiers .vue vous donne un contrôle total sur le balisage et les props, sans aucune configuration de build.