[React] Vite 프로젝트에서 SVG를 React 컴포넌트로 자동 변환

이 블로그 포스팅을 참고하였으나, 버전이 올라감에 따라 설정이 충돌되는 부분이 생겨 업데이트 버전을 직접 작성한다.1. SVG를 React에서 다루는 두 가지 방식SVG 파일을 React에서 사용하는 방법은 크게 두 갈래로 나뉜다. 하나는 빌드 시점에 번들러가 SVG를 React 컴포넌트로 변환하도록 맡기는 방식이다. vite-plugin-svgr이 여기에 해당한다. import Icon from "./icon.svg?react"처럼 쿼리 문자열 한 줄로 컴포넌트를 얻을 수 있다.다른 하나는 @svgr/cli를 사용해 SVG를 .tsx 파일로 미리 변환해 두는 방식이다. 컴파일 대상이 되는 실제 소스 파일로 존재하므로, 에디터에서 컴포넌트 이름으로 바로 이동하거나 참조를 추적하는 데 유리하다.두 방식은 ..