How to add inline SVGs in a nuxt3 vite project-CodePudding

Hi have been having troubling importing inline svgs into my nuxt3 vite project. Any advice would be much appreciated.

i found this works <img src="~/assets/images/icons/push-icon-chatops.svg" /> however i need an inline item. so i would do something like this <div v-html="rawNuxtLogo" /> and doing something like this(require doesnt work in vite) .

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

        return {
            currentIcon,
        };
    },

however i found that vite does imports weirdly and the result is either the url string showing in the v-html or a object that doesnt read

i am trying to use this plugin with no success.

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

CodePudding user response：

so its seems that vite is actually not compatiable with the @nuxtjs/svg plugin. so the answer is to rather install a vite specific plugin in this case i installed vite plugin then do this

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