Menambah SVG sebaris pada projek Nuxt3 Vite anda: panduan langkah demi langkah

Question

Hai, saya menghadapi masalah mengimport svg sebaris ke dalam projek nuxt3 vite saya. Sebarang nasihat akan sangat dihargai.

Saya dapati ini yang berfungsi 但是我需要一个内联项目。所以我会做这样的事情

dan melakukan sesuatu seperti ini (require does not work in vite).

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

        return {
            currentIcon,
        };
    },

Tetapi saya mendapati bahawa cara vite diimport adalah pelik, hasilnya sama ada rentetan url yang dipaparkan dalam v-html, atau objek tidak boleh dibaca

Saya cuba menggunakan pemalam ini tetapi tidak berjaya.

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

Answer 1

Untuk projek TS Nuxt 3, keadaannya adalah seperti berikut.

nuxt.config.ts Fail:

import svgLoader from 'vite-svg-loader'

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

Contoh komponen:

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

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

Adalah penting untuk ambil perhatian yang terakhir ?component, jika tidak TS akan melaporkan ralat.

Dokumentasi plug-in: vite-svg-loader

Answer 2

Nampaknya vite sebenarnya tidak serasi dengan @nuxtjs/svgplugin. Jadi jawapannya ialah memasang pemalam khusus vite, dalam kes ini saya memasang pemalam vite dan kemudian melakukan ini

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