pluginSvg

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

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

導入手順と使用例はガイドを参照してください。このページは設定値、コンポーネントのprops、制約をまとめています。

Table of Contents

• オプション
  • config
• Svg
• 診断
• 属性の合成と開発中の更新
• SVGの内部ID

オプション

pluginSvg({})

config

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

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

Svg

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

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

type SvgProps = {
  src: string
  className?: string
  title?: string
  attributes?: React.SVGProps<SVGSVGElement>
} & React.SVGProps<SVGSVGElement>

診断

SVGの展開に失敗した場合、ビルドは次の診断コードを出力します。

• MINISTA_SVG_READ_FAILED: SVG ファイルの読込失敗
• MINISTA_SVG_OPTIMIZE_FAILED: SVGOによる最適化失敗
• MINISTA_SVG_PARSE_FAILED: SVG マークアップの解析失敗

存在しない元ファイルはMINISTA_SVG_SOURCE_NOT_FOUND エラーとなり、ビルドを失敗させます。診断にはSVGのプロジェクト内の相対パスが含まれます。HTML処理の解析、セレクター、変更、シリアライズに失敗した場合は、対応する MINISTA_HTML_*_FAILED コードが出力されます。

属性の合成と開発中の更新

SVGO最適化後のルートから、viewBox、preserveAspectRatio、サイズ、fill／strokeなどの描画属性、style／classを保持します。Svgに明示した同名propsを優先し、style／classNameも属性単位で置き換えます。元SVGのルートid、イベント属性、data-*などの任意属性はコピーしません。明示propsと元ファイルの両方にviewBoxがない場合は0 0 0 0を使います。

開発中は参照ファイルの追加・変更・削除を反映し、参照ページを再読み込みします。再ビルド時も元ファイルを読み直します。

SVGの内部ID

グラデーション・clipPathなどの内部IDと参照には、衝突を避ける決定的な接頭辞を付けます。同じSVGの複数配置にも対応します。元の内部IDを外部CSSやJavaScriptから参照しないでください。class名は維持します。