nuxt-svgo
nuxt-svgo

最適化されたSVGファイルをVueコンポーネントとして読み込むためのNuxtモジュール
166Kダウンロード174スターv4.2.6
cpsoinoscpsoinos

nuxt-svgo

npm versionnpm downloadslicense

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をconfigに渡すことで、これを設定できます。

// 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-svgoが提供するnuxt-iconコンポーネントと同様に、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に帰属します。

nuxt-iconコンポーネントを使用した追加の制御でアイコンを自動読み込みするために、このViteプラグインの修正コピーを使用しています。

Webpack

NuxtアプリがWebpackを使用している場合、このモジュールは基礎となるWebpack設定にvue-svg-loaderとsvgo-loaderを追加します。このイシューで議論されているように、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コンポーネントをインポートすると、「Cannot find module」エラーが発生します。これを修正するには、モジュール設定でdtsオプションを有効にする必要があります。これにより、SVGインポートのTypeScript宣言ファイルが自動的に生成されます。nuxt-svgoバージョンv4.1.0以降でのみ機能します。

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

モジュールバージョンがv4.1.0未満の場合は、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>

開発

  • pnpm dev:prepare を実行して型スタブを生成する。
  • pnpm devを使用して、開発モードでプレイグラウンドを開始します。

著者

コーリー・プソイノス

ジャヴァド・ムンジド

ご支援をお願いします

このプロジェクトが役に立った場合は、⭐️をお願いします！

📝 ライセンス

Copyright © 2025 Corey Psoinos.

このプロジェクトはMITライセンスです。