Zenn
Open2

フロントエンドでSVGを使うとき

React
SVG
HimenonHimenon

外部参照化

  • react-inlinesvgが有用。URLベースでSVGを取得できるため、画像と同じ感覚で利用できる。
  • 画像と同じ感覚で利用できるようになると、アプリケーションのバンドルサイズが減る
  • SVGの管理ストレージ（リポジトリ）を集約できる

考えるべきこと

  • 初期ロードが有るため、その穴埋めをどうするか。許容 or スケルトン
HimenonHimenon

svg-sprite

  • svg-spriteを使ってsvgを1ファイル化
    • カタログも生成できて便利
  • useタグで利用することを想定
  • svg > useで利用することになるが、svg > use > #shadow-root > svg となるため、子要素のsvgタグのviewBoxを利用したい場合は親要素のsvgタグにviewBoxを指定してはいけない
  • cssでsvgのfill属性を変更したい場合、symbolとなったsvgにfillを指定していてはいけない（上書きできなくなる）
    • sprite生成時にfillをremoveしておく

設定例

import * as SVGSpriter from "svg-sprite";

const config: SVGSpriter.Config = {
    dest: dest,
    shape: {
      id: {
        generator: svgId => svgId, // これをしないとidが勝手に書き換えられる
      },
      transform: [
        {
          svgo: {
            // @ts-ignore 型定義が間違っている
            plugins: [{ removeAttrs: { attrs: ["fill"] } }],
          },
        },
      ],
    },
    mode: {
      symbol: {
        dest: ".",
        sprite: svgFileName,
      },
    },
  }