「material-design-icons/svg」をNext.jsとViteでビルドしているプロジェクトで使いたい場合の対応方法

@material-design-icons/svgをインポートして使うぞ！
と張り切って導入したらめっちゃ怒られたので鎮める方法を残します。

どんなエラーだったのか？

まず@material-design-icons/svgをinstallします。

npm install --save-dev @material-design-icons/svg
yarn add -D @material-design-icons/svg
pnpm add -D @material-design-icons/svg

インストールされたらコンポーネントで下記のように記述し読み込みました。

import ChevronRight from '@material-design-icons/svg/filled/chevron_right.svg?react'

そして下記のエラーが発生しました。

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkgM0g1Yy0xLjEgMC0yIC45LTIgMnYxNGMwIDEuMS45IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bS05IDkuNUg4djFoM1YxNUg2LjV2LTIuNWMwLS41NS40NS0xIDEtMWgydi0xaC0zVjlIMTBjLjU1IDAgMSAuNDUgMSAxdjEuNWMwIC41NS0uNDUgMS0xIDF6bTggMi41aC0xLjc1bC0xLjc1LTIuMjVWMTVIMTNWOWgxLjV2Mi4yNUwxNi4yNSA5SDE4bC0yLjI1IDNMMTggMTV6Ii8+PC9zdmc+') is not a valid name.

無効なタグ名を使って要素を作成しようとしたときに発生するようです…

解決方法

認識されるように設定してあげます。
viteでbuildされている場合は、vite-plugin-svgrを利用することで修正できました。

ツールによってインストールするものが異なります。
使っているbuildツールと共にsvgrをキーワードに含めて検索すると良いと思います！

npm install --save-dev vite-plugin-svgr
yarn add -D vite-plugin-svgr
pnpm add -D vite-plugin-svgr

npmのサイトを確認しながら設定していきます。

vite.config.ts

import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [svgrPlugin()],
  .
  .
  .
})

おおよそ完了ですが、TypeScriptの環境だとSVGの読み込み位置で下記のようなエラーが出ると思います。

モジュール '@material-design-icons/svg/filled/chevron_right.svg?react' またはそれに対応する型宣言が見つかりません。

これだけではエラーを解消することができません。
ts.configの設定ファイルを編集する必要があります。

vite-plugin-svgrのプラグインにはsvgの型定義が書かれていますが、うまく読み込めていないことが発生していました…

vite-plugin-svgrのプラグインには下記のようにsvgの型定義がされています。

declare module "*.svg?react" {
  import * as React from "react";

  const ReactComponent: React.FunctionComponent<
    React.ComponentProps<"svg"> & { title?: string }
  >;

  export default ReactComponent;
}

プラグインに定義してある型定義を利用できるようにts.configに設定を追記します。

ts.config

 "compilerOptions": {
    "types": ["vite-plugin-svgr/client"]
 },

コンポーネントとして呼び出して確認してみてください！

<ChevronRight>

画像の名称は下記のサイトから確認できます。

まとめ

知識が足りず間違ったものをインストールしたり、誤った書き方をしてしまったりで解消に時間がかかってしまいました…。

終わってみればなんのこともないのですが、この解決方法が良いのかはまだわかっておりません。
Reactを利用しているプロジェクトでSVGアイコンを扱いたい時には注意してください！

参考URL