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 하여 사용합니다.

import img from './img.svg';

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

이상입니다.

총정리

이 방법은 svg를 직접적으로 다루는게 아니기 때문에 임시나 컬러 변경등이 없을때사용하기 좋습니다.

svg를 직접적으로 컨트롤 하고싶다면 다른 방법으로 하는게 좋을거 같습니다.