ReactでSVG形式をクリック可能な要素として読み込む方法 │ wonwon eater

Create React Appで作成したアプリケーションでSVG形式のロゴ等をクリック可能な要素として読み込む方法です。
HTMLのimgタグではonClick属性は無いため、クリック可能な要素として読み込むことは出来ません。
ReactComponentとして読み込むことでクリック可能な要素として読み込みます。

1. コンポーネントとしてSVGファイルを読み込む
2. 参考
3. imgタグで読み込む

コンポーネントとしてSVGファイルを読み込む

ReactではReactComponentとしてSVGファイルを読み込むことが出来ます。
ポイントはimport時にReactComponent as LogoとReactComponentとして扱うことです。

import { ReactComponent as Logo } from './logo.svg';
function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo onClick={handleClick} />
    </div>
  );
}

参考

create-react-app.dev

Create React App · Set up a modern web app by running one command.

https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

With webpack, using static assets like images and fonts works similarly to CSS.

imgタグで読み込む

アイコンやロゴとして表示するだけであれば、HTMLのimgタグで読み込みます。
Create React Appのテンプレートの場合は、ルートにpublicディレクトリが作成されるので、その中にsvgファイル(sample.svg)を配置します。
あとは、以下の通りルートからのパス指定でsvgファイルを指定することで表示可能です。