pluginSprite

ルートパスのSVGファイルをスプライト化して出力するプラグイン。

  • スプライト生成時にSVGOでコードを最適化

Table of Contents

How To Use

./minista.config.js
import { pluginSprite } from "minista"

export default {
  plugins: [pluginSprite()],
}
./src/pages/index.jsx
import { Sprite } from "minista/assets"

export default function () {
  return <Sprite src="/src/assets/sprite/square.svg" />
}

Options

Default
pluginSprite({})

config

  • 型: Config
  • デフォルト: undefined

svgoのConfigを渡して最適化処理の内容を変更できます。

Sprite

ルートパスのSVGファイルを読み込んで <svg> タグに展開するコンポーネント。

  • スプライト生成時にSVGOでコードを最適化
./src/pages/index.jsx
import { Sprite } from "minista/assets"

export default function () {
  return <Sprite src="/src/assets/sprite/square.svg" />
}
Dist
<svg><use href="/assets/sprite.svg#square"></use>
export type SpriteProps = {
  src: string
  symbolId?: string
  className?: string
  title?: string
  attributes?: React.SVGProps<SVGSVGElement>
} & React.SVGProps<SVGSVGElement>

src

src のファイル名が symbolId になり、ディレクトリ名が出力されるSVGスプライトのファイル名になります。

src: "/src/assets/sprite/square.svg"
=> sprite.svg#square

対象となったディレクトリ内のSVGファイルは1つのSVGスプライトファイルとしてまとめられ、ビルドパイプラインに乗せられます。

SVGスプライトファイル内の symbol は symbolId 順に並べ替えられ、重複した symbolId が存在する場合は後から読み込まれたもので上書きされます。

symbolId

スプライト対象ディレクトリ内には既存のSVGスプライトファイルを混ぜることもできます。その場合、SVGスプライトのファイル名は symbolId にならないため、既存のSVGスプライトファイル内の symbol を使う場合はコンポーネントに symbolId を設定します。

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

export default function () {
  return (
    <Sprite
      src="/src/assets/sprite/common-sprite.svg"
      symbolId="common-square"
    />
  )
}