Nuxt Svgo Loader
Nuxt 模块，使用 SVGO 进行优化，将 SVG 文件加载为 Vue 组件。
特性
- 📁 将 SVG 文件加载为 Vue 组件。
- 🎨 使用 SVGO 优化 SVG。
- 🛠️ 与 Nuxt DevTools 无缝集成。
安装
安装并将 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
可以使用 ?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" ...'
跳过单个文件的 SVGO
可以通过添加 ?skipsvgo 后缀来显式禁用一个文件的 SVGO
import NuxtSvgWithoutOptimizer from '~/assets/svg/nuxt.svg?skipsvgo'
// <NuxtSvgWithoutOptimizer />
DevTools
此模块在 Nuxt DevTools 中添加了一个新标签，允许你检查 SVG 文件。
