React.jsでSVGを扱うことについて調べた

どうやらSVGはcomponentとして扱うことができて

import {ReactComponent as SvgImage} from './hoge.svg'

と書けるらしい。 また、イベントハンドラをくっつけるには

const App = () => {
  const ret =  requestAWSOfferIndex()
  return (
    <>
        < ReactLogo onClick={() => console.log("click")}/>
    </>
  );
}

こう書けるらしい。そしてcomponentはpropsにも使えるので複数のSVGをイベントを付けて操作することも同じcomponentでできそう。

 ReactDOM.render(
		<DrawComponent svg={<SvgImage someProps="SvgA" />}></DrawComponent>,
 	document.getElementById('container')
 );

複数（多数）のAssetとする場合はどうしようかな。 Typescriptでやろうと思うとeval()（transpile()）でコードを生成できるかな。 

React — Dynamic Component Names with JSX

をみるとコンポーネントの対応表をつくって処理した方がよさそうだけど数が多いと管理がやだなぁ。  

components = {
foo: FooComponent,
bar: BarComponent

    };