서론

오류 사항
'".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 />
  )
}

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

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

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

---

비고

• 최근 Vite가 5버전으로 업데이트 되어서 사용법도 살짝 바뀌게 되었습니다.

• svg에서 신경써야 할 부분은 tsconfig가 3가지로 분리가 되었다는 겁니다.

  tsconfig.json

  TS의 공통적인 설정

  tsconfig.app.json

  브라우저 환경을 위한 TS 설정 (브라우저에서 실행될 코드에 적용)

  tsconfig.node.json

  Node.js 환경을 위한 TS 설정 (Vite의 설정 파일 및 빌드 스크립트 등 Node.js 환경에서 실행되는 코드에 적용)

• 그래서 위의 최종 코드는 유효하지만 추가해야 될 부분이 생겼습니다. tsconfig.node.json에서 아래의 값들만 추가를 해주면 됩니다.

  tsconfig.node.json

  {
    "compilerOptions": {
      ...
      "types": ["vite-plugin-svgr/client"]
    },
    "include": ["vite.config.ts", "svg.d.ts"]
  }