`nuxt-svgo`

nuxt-svgo は、最適化されたSVGファイルをVueコンポーネントとして読み込むためのNuxtモジュールです。

StackBlitzで試してみてください！

インストール

npx nuxi@latest module add nuxt-svgo

使用方法

Nuxt設定の modules セクションに 'nuxt-svgo' を追加して、デフォルト設定を使用します。

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
})

その後、任意の .vue ファイルで、アセットをインポートしてコンポーネントとして使用します

<template>
  <div>
    <!-- font size controls width & height by default: -->
    <IconHome class="text-xl" />
    <!-- you can disable it: -->
    <IconHome class="w-5 h-5" :fontControlled="false" />
  </div>
</template>

<script setup lang="ts">
  import IconHome from '~/assets/icon-home.svg'
</script>

または、**vite**を使用する場合は、任意の .vue ファイルで、アイコンの名前にプレフィックス svgo を付けてコンポーネント名として使用します

<template>
  <div>
    <SvgoHome class="text-xl" />
    <!-- Or -->
    <svgo-home class="text-xl" />
  </div>
</template>

デフォルトでは、assets/icons/ フォルダーからアイコンが自動的にインポートされます。設定で autoImportPath を渡すことで、これを設定できます

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    autoImportPath: './assets/other-icons/',
  },
})

自動インポートを使用したいが、（デフォルトで使用される）nuxt-icon コンポーネントを使用したくない場合は、defaultImport: 'component' を使用することで実現できます

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    defaultImport: 'component',
  },
})

customComponent オプションを使用して、組み込みの nuxt-icon コンポーネントの代わりに独自のコンポーネントを使用することもできます。このカスタムコンポーネントは、nuxt-icon コンポーネント（nuxt-svgoによって提供される）と同様に、icon プロパティを持つ必要があります。

例

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    customComponent: 'YourComponent',
  },
})

デフォルトでは、モジュールは autoImportPath 内のすべてのアイコンをグローバルに登録します。これは、グローバルに使用される各アイコンのチャンクが生成されるため、アイコンが多い場合に大量のファイルが生成されるため、望ましくない動作となる可能性があります。グローバル登録を無効にするには、モジュールオプションで global: false を使用します

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    global: false,
  },
})

自動インポートを無効にするには、autoImportPath を false に設定します

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    autoImportPath: false,
  },
})

サブフォルダー

アイコンのコンポーネント名は、Nuxtのコンポーネントプレフィックス規則に従います。そのため、コンポーネントのプレフィックスが有効になっている場合、たとえば assets/icons/admin/badge.svg のコンポーネント名は svgo-admin-badge になります

<svgo-admin-badge />

`componentPrefix`

componentPrefix オプションを使用して、デフォルトのプレフィックス（svgo）をカスタムプレフィックスに変更できます

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    componentPrefix: 'i',
  },
})

// in your template
<template>
  <div>
    <i-home />
  </div>
</template>

仕組み

Vite

NuxtアプリケーションでViteを使用する場合、このモジュールは基盤となるVite設定にvite-svg-loaderを追加します。vite-svg-loader のすべての功績は、その作者である@jpkleemansに帰属します。

このviteプラグインの修正コピーを使用して、nuxt-icon コンポーネントを使用して追加制御を行うことで、アイコンを自動読み込みします。

NuxtアプリケーションでWebpackを使用する場合、このモジュールは基盤となるWebpack設定にvue-svg-loaderとsvgo-loaderを追加します。この issueで説明されているように、vue-svg-loader はSVGOのバージョン1を使用します。vue-svg-loader はメンテナンスされていないようで、最新のベータリリースは2年以上前です。 vue-svg-loader のSVGO機能を無効にし、代わりに svgo-loader を使用して最適化を実行することで、本質的に vue-svg-loader はsvgコンテンツを <template></template> タグでラップします。

vue-svg-loader のすべての功績は、その作者である@damianstasikに帰属します。svgo-loader のすべての功績は、その作者である@svgに帰属します。

Webpackを使用している場合は、このモジュールのピア依存関係（vue-svg-loader、svgo-loader、vue-loader）がインストールされていることを確認してください。

設定

独自のSVGOオプションを使用する

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    svgoConfig: {
      multipass: true,
      plugins: [
        {
          name: 'preset-default',
          params: {
            overrides: {
              // customize default plugin options
              inlineStyles: {
                onlyMatchedOnce: false,
              },

              // or disable plugins
              removeDoctype: false,
              removeViewBox: false,
            },
          },
        },
      ],
    },
  },
})

SVGOを完全に無効にする

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-svgo'],
  svgo: {
    svgo: false,
  },
})

インポートクエリ（Vite.jsのみ）

SVGファイルをインポートする場合に使用可能なクエリを以下に示します

url_encode：最適化されたsvgをデータURIとして読み込みます（svgo + mini-svg-data-uriを使用）
raw：コンテンツをテキストとして読み込みます
raw_optimized：最適化されたsvgをテキストとして読み込みます
skipsvgo：コンテンツをコンポーネントとして読み込みます（最適化されていない、nuxt-iconなし）
component：最適化されたsvgをコンポーネントとして読み込みます
componentext：nuxt-iconコンポーネントを使用して最適化されたsvgを読み込みます

例えば

<template>
  <div>
    <IconHome />
  </div>
</template>

<script setup lang="ts">
  import IconHome from '~/assets/icon-home.svg?componentext' // the default
</script>

`url_encode`クエリの重要な注意事項

uriデータが機能するには、xmlns="http://www.w3.org/2000/svg"属性が必要です。まれに、存在しない場合があります。url_encodeクエリを使用する場合は、必ず存在することを確認してください。そうでない場合、画像は表示されません。

TypeScriptでの使用方法

TypeScriptでSVGコンポーネントをインポートすると、「モジュールが見つかりません」エラーが発生します。これを修正するには、TypeScriptにSVGコンポーネントの処理方法を指示する型宣言を提供する必要があります。アプリケーションのルートにある custom.d.ts ファイルを使用した例を次に示します

// custom.d.ts
declare module '*.svg' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent
  export default component
}

`nuxt-icon` コンポーネント

元々はnuxt-iconsモジュールからコピーされましたが、後にツリーシェーキングとSSRをサポートするために大幅に変更されました。これは直接使用することを意図したものではありません。ただし、アイコンを直接インポートし、iconプロパティを使用してコンポーネントに渡すことができます。

コンポーネントのプロパティ

filled：trueの場合、アイコンの元のカラーを使用します
fontControlled：このプロパティをfalseに設定することで、フォントサイズによるスケーリングのデフォルト動作を無効にできます
icon：nuxt-iconがレンダリングするコンポーネント。これは、アイコンの制御を提供するために内部的に使用されます。

v1.xからv2.xへの移行

以前nuxt-iconコンポーネントを使用していた場合は、コードを次のように変更する必要があります

<!-- from: -->
<nuxt-icon name="home" filled />
<nuxt-icon name="special/home" filled />
<!-- to: -->
<svgo-home filled />
<svgo-special-home filled />

v2.xからv3.xへの移行

v3はデフォルトでsvgoに意見のあるデフォルト設定を使用するようになりました。以前のように動作させるには、svgoConfigオプションに{}を渡すだけです

export default defineNuxtConfig({
  // ...
  svgo: {
    svgoConfig: {},
  },
})

また、v3以降、simpleAutoImportオプションは削除され、defaultImportはcomponentextに変更されました。次のコードを使用し、defaultImportに依存していた場合は、変更してください

<template>
  <div>
    <IconHome class="text-xl" />
  </div>
</template>

<script setup lang="ts">
  // change this:
  import IconHome from '~/assets/icon-home.svg'
  // to this:
  import IconHome from '~/assets/icon-home.svg?component'
</script>