如何在 Nuxt3 Vite 项目中添加内联 SVG？

Question

您好，我一直在尝试将内联 SVG 导入到我的 Nuxt3 Vite 项目中。有什么建议吗？

我发现这个方法可以：<img src="~/assets/images/icons/push-icon-chatops.svg" />，但是我需要一个内联项。所以我会像这样做：<div v-html="rawNuxtLogo" />，并且使用类似这样的方法（在 vite 中不起作用）：require。

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

        return {
            currentIcon,
        };
    },

然而，我发现Vite在导入方面的表现很奇怪，结果要么是URL字符串显示在v-html中，要么是无法读取的对象。

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

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

- Jean-Pierre Engelbrecht

---

这个回答解决了你的问题吗？如何在Nuxt应用程序中包含内联.svg - bitski

@bitski，那是我查看的其中一项。在Vite中无法使用require，所以我必须进行动态导入，但似乎它并不起作用。 - Jean-Pierre Engelbrecht

Answer 1

看起来vite实际上与@nuxtjs/svg插件不兼容。因此，在这种情况下，答案是安装一个专门为vite设计的插件，在这种情况下我安装了vite插件然后执行以下操作

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

- Jean-Pierre Engelbrecht

---

本来可以尝试一下nuxt-svgo，但总的来说，几个月前我为一个朋友开发了一个Vite插件，效果非常好！请在您能够时接受您的答案。 - kissu

Answer 2

对于 TS Nuxt 3 项目，应该是这样的。

nuxt.config.ts 文件：

import svgLoader from 'vite-svg-loader'

export default defineNuxtConfig({
  // Rest of your config.
  vite: {
    plugins: [
      svgLoader({
       // Your settings.
      }),
    ],
  },
})

组件示例：

<template>
  <div>
    <ArrowLeft />
  </div>
</template>

<script setup lang="ts">
import ArrowLeft from '../assets/svg/arrow-left.svg?component'
</script>

请注意，末尾的?component是重要的，否则TS会报错。

插件文档：vite-svg-loader。

- Leopold Kristjansson

---

使用这个时如何改变尺寸？ - Alauddin Afif Cassandra

@AlauddinAfifCassandra - 如果你指的是屏幕上SVG的实际大小，那是在HTML/CSS中完成的。这个回答只涉及到如何加载SVG文件。 - Leopold Kristjansson

这对于动态导入如何工作呢？我在模板中有<component :is="icon" />，然后icon.value = import(\/assets/icons/${props.name}.svg`)，但是我得到了Uncaught (in promise) TypeError: Failed to resolve module specifier '/assets/icons/arrow-up.svg'`的错误提示。 - undefined

Answer 3

在Nuxt 3中使用内联SVG图像，而不使用任何库，如vite-svg-loader或nuxt-svgo。

    <template>
        <span v-html="icon" />
    </template>

    <script lang="ts" setup>
       import { filename } from 'pathe/utils';
      
       const props = defineProps<{
            icon: string;
        }>();
    
       // Auto-load icons as raw
       const glob = import.meta.glob('~/assets/*.svg', { as: 'raw' });
       const images = Object.fromEntries(
       Object.entries(glob)
         .map(([key, value]: [string, any]) => [filename(key), value]))
    
       // Lazily load the icon
       const icon = props.icon && (await images?.[props.icon]?.());
    </script>

- Manos

---

建议始终将实际内容放在那里，而不是链接到答案。链接可能在将来不存在。 - undefined