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

Question

您好，在将内联 svgs 导入到我的 nuxt3 vite 项目中时遇到了麻烦。任何建议将不胜感激。

我发现这可行 <img src="~/assets/images/icons/push-icon-chatops.svg" />，但我需要一个内联项目。所以我会做这样的事情<div v-html="rawNuxtLogo" />并做这样的事情（require在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()
    ]
},