Nuxt Svgo Loader

Nuxt 模块，用于将 SVG 文件加载为 Vue 组件，并使用 SVGO 进行优化。

功能

安装 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 文件。