@nuxtjs/svg-sprite

Nuxt で SVG ファイルを使用する最適化された簡単な方法

SVGスプライトモジュール

Nuxt.js で SVG ファイルを使用する最適化された簡単な方法

スプライトは、速度向上、一貫した開発ワークフローの維持、アイコン作成の高速化に役立ちます。SVGスプライトは通常、同様の形状や形式のアイコンを使用して作成されますが、大規模なグラフィックは一度限りのアプリケーションです。

⚠️ 注意: SVGスプライトはIEでは動作しません。IEをサポートしたい場合は、svg4everybodyを使用できます。方法については、この問題をご覧ください。

🌈 注意: 単一のSVGアイコンをロードし、スプライトを作成したくない場合は、Nuxt SVGモジュールを使用してください。Nuxt.js用のSVGモジュールは、提供するリソースクエリに応じて、.svgファイルを複数の方法でインポートできます。

yarn add @nuxtjs/svg-sprite
# or
npm i @nuxtjs/svg-sprite

@nuxtjs/svg-sprite を nuxt.config.js の buildModules セクションに追加します。

{
  buildModules: [
    '@nuxtjs/svg-sprite',
  ],
  svgSprite: {
    // manipulate module options
  }
}

svgファイルを ~/assets/sprite/svg/ に配置し（例: sample.svg）、グローバルに登録された svg-icon コンポーネントで画像を使用します。

<svg-icon name="sample" />

異なるスプライトを作成するには、~/assets/sprite/svg/ 内にカスタムディレクトリを作成し、その中にSVGファイルを配置して、アイコン名の前にディレクトリ名を配置します（例: ~/assets/sprite/svg/my-sprite/my-image.svg）。

<svg-icon name="my-sprite/my-image" />

モジュールは、すべてのアイコンを一覧表示するページを作成します。デフォルトでは、このページは /_icons パスで表示できます。
注: このページは dev モードで作成されるため、本番環境では表示できません。

モジュールのデフォルトオプション

オプション	デフォルト	説明
input	`~/assets/sprite/svg`	元のSVGファイルのディレクトリ
output	`~/assets/sprite/gen`	生成されたスプライトを保存するディレクトリ
defaultSprite	`icons`	デフォルトのスプライト名（デフォルトのスプライトは、`input` ディレクトリに直接配置されたすべてのSVGで構成されます）
elementClass	`icon`	すべての `<svg-icon>` インスタンスのグローバルクラス
spriteClassPrefix	`sprite-`	スプライト固有のクラスのプレフィックス
publicPath	`null`	スプライトのカスタム公開パスを指定します。
iconsPath	`_icons`	アイコンリストページのカスタムパス（このページを無効にするには、このオプションに `false` または `null` を渡します）
svgoConfig	`null`	SVGO のカスタム設定オブジェクト、SVGO 設定のカスタマイズ方法

nuxt.config.js の svgSprite オプションで更新できます。

export default {
  buildModules: ['@nuxtjs/svg-sprite'],
  svgSprite: {
    input: '~/assets/svg/'
  }
}

Prop	説明
name	`SPRITE_NAME/ICON_NAME` 形式のアイコンパス。`SPRITE_NAME` はデフォルトのスプライトでは省略できます。
title	アイコンのアクセシビリティタイトル。このプロパティは `<svg>` タグ内の `<title>` タグに変換されます。
desc	アイコンのアクセシビリティ説明。このプロパティは `<svg>` タグ内の `<desc>` タグに変換されます。