SVGスプライト

pluginSprite()は同じディレクトリのSVGを一つのスプライトファイルへまとめます。各アイコンはHTMLのuse要素から参照するため、複数ページで同じアイコンを使う構成に適しています。

SVG最適化はページ内へ図形を展開する方法、このページは外部のSVGファイルを共有する方法です。両方を使う場合は対応するプラグインをそれぞれ追加します。

Table of Contents

プラグインを追加する

vite.config.ts
import { defineConfig, pluginSsg, pluginSprite } from "minista"

export default defineConfig({
  plugins: [pluginSsg(), pluginSprite()],
})

アイコンをまとめる

src/assets/icons/を作り、次の二つのSVGを配置します。

src/assets/icons/square.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="currentColor" d="M4 4h16v16H4z" />
</svg>
src/assets/icons/circle.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle fill="currentColor" cx="12" cy="12" r="8" />
</svg>
プロジェクト構成
src/
├── assets/
│   └── icons/
│       ├── square.svg
│       └── circle.svg
└── pages/
    └── index.tsx

Spriteで参照する

src/pages/index.tsx
import { Sprite } from "minista/assets"

export default function Page() {
  return (
    <>
      <h1>My Site</h1>
      <Sprite src="/src/assets/icons/square.svg" title="四角" width={24} height={24} />
      <Sprite src="/src/assets/icons/circle.svg" title="丸" width={24} height={24} />
    </>
  )
}

参照したディレクトリのSVGがまとめられます。ディレクトリ名が出力ファイルの基になる名前、拡張子を除いたファイル名がsymbolのIDになります。

ビルド結果を確認する

ビルド結果の例
dist/
├── index.html
└── assets/
    └── icons-[hash].svg

出力HTMLは次のようにスプライトを参照します。実際の属性やファイル名は設定によって変わります。

dist/index.htmlの抜粋
<svg viewBox="0 0 24 24" width="24" height="24">
  <use href="/assets/icons-[hash].svg#square"></use>
</svg>

SVGを最適化したうえでsymbolへ変換し、共通の出力へまとめます。公開時にはHTMLだけでなく、スプライトファイルも一緒に配置してください。

既存スプライトを使う

symbolを含む既存のSVGも、同じディレクトリへ置けます。この場合は使いたいIDをsymbolIdで指定します。

<Sprite
  src="/src/assets/icons/common.svg"
  symbolId="arrow-right"
  width={24}
  height={24}
/>

この例にはarrow-rightというsymbolを持つcommon.svgが必要です。同じ出力内でIDが重複するとビルドが停止するため、ファイル名や既存のIDを一意にします。

設定値、内部IDの扱い、SVGOの制約はpluginSpriteを参照してください。

次はIslandで、操作できるUIを追加します。

前のページSVG最適化
次のページIsland