SVG Spriteモジュール

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
  }
}

~/assets/sprite/svg/に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/'
  }
}

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