Nuxt Svgo 加载器

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 导入为 URL。

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 DevTools 添加了一个新选项卡，允许您检查 SVG 文件。