在 Nuxt3 Vite 專案中加入內嵌 SVG：逐步指南

Question

您好，將內聯 svgs 匯入我的 nuxt3 vite 專案時遇到了麻煩。任何建議將不勝感激。

我發現這個有效 但是我需要一個內嵌項目。所以我會做這樣的事情

並做這樣的事情（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

對於 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

#

Answer 2

看來vite其實與@nuxtjs/svg外掛不相容。所以答案是安裝一個 vite 特定插件，在這種情況下我安裝了 vite 插件 然後執行此操作

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