React create-react-app したプロジェクトで inline-svg を使いたい

SVGな画像を扱う時に、CSSやJSで色などをコントロールしたい場合、inline-svg にするのが扱いやすくて良いです。
create-react-app で作成した React のプロジェクトで eject せずに inline-svg を使えるように出来たのでメモ。

"react": "^16.13.1"
"react-dom": "^16.13.1"
"react-scripts": "^3.4.1"

React で svg 画像を inline-svg として使う方法

検索すると多くは loader を用いて webpack で設定を行うという感じでしたが、create-react-app ( or npm install react-scripts ) したプロジェクトでは eject しなければ webpack の設定を触ることが出来ません。

特に何もインストールすることなく inline-svg として読み込ませる方法があったようです！！！
画像を entry point がある ./src フォルダ内に配置し、下記のように読み込ませ ReactComponent として扱えばOK

import React from 'react';
import { ReactComponent as MySVGImage } from './svg/my-image.svg';

const mySVGImage = <MySVGImage />;

yarn start して dev tool などで inline-svg として画像が表示されていればOK!
A W E S O M E !
　
やはりプログラミング関係は英語で検索した方が良い結果を得られやすいな〜と実感しました。
英語チカラつけていきたい… (毎年言ってる気がする…)

おしまい

[参考]