Hi, I'm having trouble importing inline svgs into my nuxt3 vite project. Any advice would be greatly appreciated.
I found this works 
setup(props) {
const currentIcon = computed(() => {
return defineAsyncComponent(() =>
import(`~/assets/images/icons/push-icon-chatops.svg'?inline`)
);
}).value;
return {
currentIcon,
};
},
But I found that the way vite is imported is strange, the result is either the url string displayed in v-html, or an unreadable object
I'm trying to use this plugin but without success.
https://github.com/nuxt-community/svg-module
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
For the TS Nuxt 3 project, the situation is as follows.
nuxt.config.tsFile:import svgLoader from 'vite-svg-loader' export default defineNuxtConfig({ // Rest of your config. vite: { plugins: [ svgLoader({ // Your settings. }), ], }, })Component example:
<template> <div> <ArrowLeft /> </div> </template> <script setup lang="ts"> import ArrowLeft from '../assets/svg/arrow-left.svg?component' </script>Note that the last
?componentis very important, otherwise TS will report an error.Plug-in documentation: vite-svg-loader
It appears that vite is actually incompatible with the
@nuxtjs/svgplugin. So the answer is to install a vite specific plugin, in this case I installed the vite plugin and then did thisvite: { plugins: [ svgLoader() ] },