nuxt-svgo-loader

一個 Nuxt 模組，使用 SVGO 最佳化，將 SVG 檔案載入為 Vue 元件。

7.1K 次下載•27 顆星•v0.6.3

Mini-ghost

Nuxt Svgo 載入器

一個 Nuxt 模組，使用 SVGO 最佳化，將 SVG 檔案載入為 Vue 元件。

功能

📁 將 SVG 檔案載入為 Vue 元件。
🎨 使用 SVGO 最佳化 SVG。
🔧 宏 <SvgoIcon> 元件，便於 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 的文件以獲取可用選項。

使用

SvgoIcon 元件

使用宏 <SvgoIcon> 元件是使用 SVG 圖示最簡單的方法。該元件會根據 name 屬性在構建時自動解析和匯入 SVG 檔案。

<template>
  <div>
    <!-- Automatically imports ~/your-svg-folder/nuxt.svg as a component -->
    <SvgoIcon name="nuxt" width="92" height="92" fill="#00DC82" />
    
    <!-- Use strategy prop to modify SVG processing -->
    <SvgoIcon name="vue" strategy="skipsvgo" />
  </div>
</template>

<SvgoIcon> 元件

自動轉換為相應的匯入 SVG 元件
支援透過 strategy 屬性（component, skipsvgo）匯入策略
為可用的 SVG 名稱提供型別安全
僅在 Vue SFC <template> 塊內有效

上述模板在構建時會轉換為

<script setup lang="ts">
import NuxtSvg from '~/your-svg-folder/nuxt.svg?component'
import VueSvg from '~/your-svg-folder/vue.svg?skipsvgo'
</script>

<template>
  <div>
    <NuxtSvg width="92" height="92" fill="#00DC82" />
    <VueSvg />
  </div>
</template>

名稱空間

您可以使用名稱空間來組織您的 SVG 檔案。例如，如果您有如下的資料夾結構

assets/
└── svg/
    ├── nuxt.svg
    └── vue.svg

在您的 nuxt.config.ts 中，在 svgoLoader.namespaces 中新增一個專案

export default defineNuxtConfig({
  modules: ['nuxt-svgo-loader'],
  svgoLoader: {
    namespaces: [
      {
        prefix: 'my-icon',
        dir: './app/assets/svg',
      },
    ],
  },
})

然後你就可以像這樣使用圖示了

<template>
  <div>
    <SvgoIcon name="my-icon:nuxt" width="92" height="92" fill="#00DC82" />
    <SvgoIcon name="my-icon:vue" strategy="skipsvgo" />
  </div>
</template>

預設情況下，namespaces 是停用的。所有 app/ 下的 SVG 檔案都將被掃描。當 namespaces 被啟用時，只有指定的目錄會被包含。

手動匯入

元件

可以使用 ?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 />

開發工具

此模組為 Nuxt DevTools 添加了一個新選項卡，允許您檢查 SVG 檔案。