Nuxt Svgo Loader

Nuxt 模組，使用 SVGO 優化並載入 SVG 檔案作為 Vue 元件。

功能

安裝並將 nuxt-svgo-loader 加入至您的 nuxt.config。

npx nuxi@latest module add nuxt-svgo-loader

export default defineNuxtConfig({
  modules: ['nuxt-svgo-loader'],
  svgoLoader: {
    // Options here will be passed to `vite-svg-loader`
  }
})

!注意由於 nuxt-svgo-loader 是一個基於 vite-svg-loader 的 Nuxt 模組，因此 svgoLoader 的配置與 vite-svg-loader 的配置相同。您可以參考 vite-svg-loader 的文件以了解可用的選項此處。

可以使用 ?component 後綴將 SVG 顯式匯入為 Vue 元件

import NuxtSvg from '~/assets/svg/nuxt.svg'
// <NuxtSvg />

可以使用 ?url 後綴將 SVG 匯入為網址

import nuxtSvgUrl from '~/assets/svg/nuxt.svg?url'
// nuxtSvgUrl === '/_nuxt/assets/svg/nuxt.svg'

可以使用 ?raw 後綴將 SVG 匯入為原始字串

import nuxtSvgRaw from '~/assets/svg/nuxt.svg?raw'
// nuxtSvgRaw === '<svg xmlns="http://www.w3.org/2000/svg" ...'

可以透過新增 ?skipsvgo 後綴來顯式停用單一檔案的 SVGO

import NuxtSvgWithoutOptimizer from '~/assets/svg/nuxt.svg?skipsvgo'
// <NuxtSvgWithoutOptimizer />

此模組會在 Nuxt 開發工具中新增一個分頁，讓您可以檢視 SVG 檔案。