Ajouter du SVG en ligne à votre projet Nuxt3 Vite : un guide étape par étape

Question

Bonjour, j'ai du mal à importer des svgs en ligne dans mon projet nuxt3 vite. Tout avis serait grandement apprécié.

J'ai trouvé ceci qui fonctionne 但是我需要一个内联项目。所以我会做这样的事情

et fait quelque chose comme ça (require ne fonctionne pas en vite).

setup(props) {
        const currentIcon = computed(() => {
            return defineAsyncComponent(() =>
                import(`~/assets/images/icons/push-icon-chatops.svg'?inline`)
            );
        }).value;

        return {
            currentIcon,
        };
    },

Mais j'ai trouvé que la façon dont vite est importé est étrange, le résultat est soit la chaîne url affichée en v-html, soit un objet illisible

J'essaie d'utiliser ce plugin mais sans succès.

https://github.com/nuxt-community/svg-module

Answer 1

Pour le projet TS Nuxt 3, la situation est la suivante.

nuxt.config.ts Fichier :

import svgLoader from 'vite-svg-loader'

export default defineNuxtConfig({
  // Rest of your config.
  vite: {
    plugins: [
      svgLoader({
       // Your settings.
      }),
    ],
  },
})

Exemple de composant :

<template>
  <div>
    <ArrowLeft />
  </div>
</template>

<script setup lang="ts">
import ArrowLeft from '../assets/svg/arrow-left.svg?component'
</script>

Il est important de noter le dernier ?component, sinon TS signalera une erreur.

Documentation du plug-in : vite-svg-loader

Answer 2

Il semble que vite soit en fait incompatible avec le @nuxtjs/svgplugin. La réponse est donc d'installer un plugin spécifique à vite, dans ce cas j'ai installé le plugin vite puis j'ai fait ceci

vite: {
    plugins: [
        svgLoader()
    ]
},