React svgの使用

この文章は、前木さんの採用準備中に学んだことをまとめた文章です.
今日はsvgの使い方について説明します.
実は、私も普段Reactで画像ファイルを使っていますが、不便+忘れなので毎回検索していますので、この機会にこの方法を記録しておきたいと思います.
svgを使用するにはいくつかの方法があります.
今日はsrcの使い方を記録します.
1.srcフォルダに画像を含むフォルダを作成します.
├── public/
├── src/
||||||&img/-imgフォルダ
├── App.tsx
├── index.tsx
├── README.md
├── tsconfig.json
└── package.json
2. custom.d.tsを作成します.
app.tsxと同じ場所で作成

declare module '*.svg' {
  const content: any;
  export default content;
}
 

3. tsconfig.jsonを修正します.

 "include": ["src", "src/custom.d.ts"]

includeで作成されたcustom.d.tsを追加します.

4.使用する構成部品にインポートします.

import img from './img.svg';

 <img src={img} alt='사진' />

ここまでです.

まとめ

この方法はsvgを直接処理するものではないので、一時的な変更や色の変更がない場合によく使用されます.
svgを直接制御するには、他の方法が望ましい.