Nuxt Svgo Loader

SVGOを使用して最適化し、SVGファイルをVueコンポーネントとしてロードするNuxtモジュール。

機能

📁 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`
  }
})

!NOTE nuxt-svgo-loaderはvite-svg-loaderに基づいたNuxtモジュールであるため、svgoLoaderの設定はvite-svg-loaderの設定と同一です。利用可能なオプションについては、vite-svg-loaderのドキュメントをこちらで参照できます。

使い方

コンポーネント

SVGは、?componentサフィックスを使用してVueコンポーネントとして明示的にインポートできます

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

URL

SVGは、?urlサフィックスを使用してURLとしてインポートできます

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

Raw

SVGは、?rawサフィックスを使用して生の文字列としてインポートできます

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

単一ファイルでのSVGOのスキップ

SVGOは、?skipsvgoサフィックスを追加することで、1つのファイルに対して明示的に無効にできます

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

DevTools

このモジュールは、Nuxt DevToolsに新しいタブを追加し、SVGファイルを検査できます。