pluginSvg

ルートパスの SVG ファイルを HTML にインラインで展開するプラグイン。

  • 展開時に SVGO でコードを最適化

Table of Contents

How To Use

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

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

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

Options

Default
pluginSvg({})

config

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

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

Svg

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

  • 展開時に SVGO でコードを最適化
./src/pages/index.jsx
import { Svg } from "minista/assets"

export default function () {
  return <Svg src="/src/assets/square.svg" />
}
Dist
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M76 76h360v360H76z" style="fill:#000;stroke-width:0"></path>
</svg>
type SvgProps = {
  src: string
  className?: string
  title?: string
  attributes?: React.SVGProps<SVGSVGElement>
} & React.SVGProps<SVGSVGElement>