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 
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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pour le projet TS Nuxt 3, la situation est la suivante.
nuxt.config.tsFichier :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
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 cecivite: { plugins: [ svgLoader() ] },