[React] svg를 컴포넌트로 사용하기

• SVG 파일을 컴포넌트로 사용하면 원하는 색깔, 크기로 다양한 형태의 아이콘을 생성할 수 있다. 하지만 '.svg' 파일 내부에 ReactComponent와 관련된 타입을 추론할 수 없다는 TS Error가 발생할 수 있다.

• vite를 번들러로 사용하는 프로젝트 환경에서는 svgr 플러그인을 설치하고, custom.d.ts와 vite.config.ts를 설정하여 이 문제를 해결할 수 있다.

• CRA를 통해 프로젝트를 세팅한 경우 webpack을 모듈 번들러로 사용하므로, custom.d.ts 파일과 tsconfig.json을 수정하여 문제를 해결할 수 있다.

• 이러한 과정을 통해 SVG 파일을 컴포넌트로 사용하여 다양한 형태의 아이콘을 생성하고, TS Error를 해결할 수 있다.