SVGスプライトのビルドツールと自動化

SVGスプライトのビルドツール

SVGスプライトジェネレーターWebツールは素早い1回限りのスプライト作成に最適ですが、本番ワークフローでは自動化されたビルド時スプライト生成が有益です。

SVGO（SVGオプティマイザー）

SVGOはSVG最適化のデファクトスタンダードです。Node.js CLIまたはプログラマティックAPIとして動作します。

svg-sprite

svg-sprite npmパッケージはSVGのディレクトリからスプライトシートを生成します。

Viteプラグイン

Viteベースのプロジェクトではvite-plugin-svg-iconsを使用します。

Webpackローダー

Webpackプロジェクトではsvg-sprite-loaderを使用します。

npmスクリプトワークフロー

ビルドツールプラグインなしのシンプルなnpmスクリプトアプローチ：

{
  "scripts": {
    "icons:optimize": "svgo -f src/icons -o src/icons-opt",
    "icons:sprite": "node scripts/build-sprite.js",
    "icons:build": "npm run icons:optimize && npm run icons:sprite"
  }
}

CI/CD統合

CIパイプラインにスプライト生成を追加して、コミットされたスプライトファイルが常にソースSVGと最新状態であることを確認します。