참고자료
https://stackoverflow.com/questions/70309561/unable-to-import-svg-with-vite-as-reactcomponent

서론

오류 사항
'".svg"' 모듈에 내보낸 멤버 'ReactComponent'이(가) 없습니다. 대신 '".svg"에서 ReactComponent 가져오기'를 사용하시겠습니까?

React로 네비게이션 바 작업 중 클릭 시 svg의 색을 변하게 하고 싶어서 React에서 SVG를 컴포넌트로 사용하는 방법 적용하려고 여러 블로그를 찾아봤으나 블로그마다 사용 방법이 다 다르고 적용해도 오류 투성이었다... ChatGPT도 많이 발전은 했으나 아직 헛소리가 많다...
여러 방법들을 검색하던 중 스택오버플로우에서 최신 버전에서 사용법이 바뀌었다는 글을 보고 적용해보았다.

언어 : TypeScript (v5.2.2)
라이브러리 : React (v18.2.0)
빌드 도구: Vite (v4.4.5)
컴파일러 : SWC

vite-plugin-svgr (v4.0.0 이상)

적용

vite.config.ts 설정

vite-plugin-svgr 설치

npm install vite-plugin-svgr --save-dev

vite.config.ts 수정

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [react(), svgr()],
  ...
});

svg파일 import

vite-plugin-svgr (4.0.0 이전 버전)

• 이전 버전에서는 ReactComponent라는 것을 사용해서 import를 진행했다.

import { ReactComponent as TestSVG } from 'assets/images/test.svg';

return (<TestSVG />)

vite-plugin-svgr (4.0.0 이후 버전)

• 4.0.0 이상 버전에서는 사용 방법이 살짝 다르다.
• SVG 파일을 가져올 때, ?react라는 접미사를 붙여 앨리어싱을 건너뛰어 기본 내보내기를 사용할 수 있다.
• 이렇게 사용할 경우 svg.d.ts 파일을 생성해야 한다. (아래의 최종 코드 참고)

import TestSVG from 'assets/images/test.svg?react';

return (<TestSVG />)

결론 (최종 코드)

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [react(), svgr()],
  ...
});

svg.d.ts

// svg.d.ts
declare module "*.svg" {
  const value: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default value;
}

SVG를 사용하는 컴포넌트

// Test.tsx
import TestSVG from 'assets/images/test.svg?react';

const Test = () => {
  return (
  	<TestSVG />
  )
}

계속 계속 오류가 발생하고 여러 블로그를 보다보니 어떤 곳은 이런 방법 어떤 곳은 저런 방법이다 보니 점점 프로젝트가 난잡해지고 라이브러리 설치도 너무 많이 했다...
(공식 문서나 깃허브를 참고하는 방법이 제일 좋은 것 같다)

혹시라도 같은 버전을 사용하고 있는 분이 같은 오류를 직면한다면 이 글이 도움이라도 될까 작성해보았다.