Create React App で SVG をコンポーネントとしてimport して使用する

Create React App を使用している場合、 svgファイルをコンポーネントとして import して使用できるということを今日知ったのでメモしておきます。公式ドキュメントはこちらになります。

SVG をコンポーネントとして import

svgファイルからReactComponentをimportする形式を取ることでコンポーネントとして扱えます。

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

対応バージョン

react-scripts@2.0.0以上かつ、react@16.3.0以上の場合に使用可能です。

参考URL

Create React App documents (https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files)