如何在nuxt3 vite项目中添加内联SVGs

Question

嗨，在我的nuxt3 vite项目中导入内联svgs一直很麻烦。如有任何建议，将不胜感激。

我发现这是有效的<img src="~/assets/images/icons/push-icon-chatops.svg" />，但是我需要一个内联项目。所以我会做一些类似<div v-html="rawNuxtLogo" />的事情，并做类似的事情(在vite中不需要工作)。

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

        return {
            currentIcon,
        };
    },

但是，我发现vite确实很奇怪地导入，结果要么是v-html中显示的url字符串，要么是不读取的对象。

我正在尝试使用这个插件，但没有成功。

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

Answer 1

因此，看来vite实际上与@nuxtjs/svg插件不兼容。因此，答案是安装一个vite特定的插件，在本例中，我安装了vite插件，然后执行以下操作

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