React svgの使用

1416 ワード
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を直接制御するには、他の方法が望ましい.
    leetcode-Max Points on a Line
    *JAVA-作成者