svgファイルをReactコンポーネントに変換する

svgrを使う。

"@svgr/webpack": "^6.2.1"

TypeScriptだと

によく似たSyntax errorが出た。

解決方法

.svgrrc.jsに記載してたtypescript: trueを止めて、ext: 'tsx'のみにしたら直った。

module.exports = {
    // typescript: true,
    ext: 'tsx'
}

もしかしたら.svgrrc.js自体要らないかも。

参照URL

https://react-svgr.com/docs/next/

mimi

やっぱり^6.2.1で、TypeScriptでNext.jsだと公式のドキュメントの設定だけでOK。.svgrrc.jsは要らない。

mimi

option https://react-svgr.com/docs/options/ は next.config.js に追記する
titleProp: trueで<Icon title="IconName" />とかでtitleタグがsvgタグ内に挿入される。
けど、a11y的に不完全。

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: {
        loader: '@svgr/webpack',
        options: {
          titleProp: true
        }
      },
    })

    return config
  }
}

mimi

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: {
        loader: '@svgr/webpack',
        options: {
          titleProp: true,
          titleId: 'filePath'
        }
      },
    })

    return config
  }
}

で、<Icon title="Icon Name" titleID="icon_id" />とかするとidとaria-labelledbyも付与される