[React] Vite 4.0 이상에서 SVG 사용하는 방법

오류를 만나다

React에서 SVG를 import 하는 방식은 여러가지가 있지만 ReactComponent를 사용해 import 하는 방식을 주로 사용했다.

import { ReactComponent as SampleSVG } from 'assets/sample.svg';

return <SampleSVG />

 

하지만 Vite를 사용하면서 다음과 같은 오류를 만나게 되었다. 오류를 만난 환경은 다음과 같다.

- React : 18.2.0

- VIte : 5.0.8

- Typescript : 5.2.2

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

 

 vite-plugin-svgr 설치

설치한 버전 :  vitejs/plugin-react-swc : 3.5.0

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

 

 

vite.config.ts 수정

svgr을 import 해주고 plugins에 svgr()을 추가해준다.

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

export default defineConfig({
  plugins: [react(), svgr()],
  server: {
    port: 3000,
  },
});

 

블로그에 따라 여기까지만 진행하고 SVG를 정상적으로 import해서 사용하는 경우가 있는 것 같은데 나는 다음과 같은 오류가 발생했다.

모듈 또는 해당 형식 선언을 찾을 수 없습니다.

tsconfig.json 수정

컴파일러 옵션의 타입에 vite-plugin-svgr/client 을 추가해줌으로서 오류를 해결했다.

  "compilerOptions": {
	...
    "types": ["vite-plugin-svgr/client"],
   }

 

SVG 불러오기

vite-plugin-svgr 4.0 이후부터는  ReactComponent as 를 사용하지 않아도 된다. 대신 파일이름.svg 뒤에 ?react를 붙여줘야한다.

import SampleSVG from 'assets/sample.svg?react';

return <SampleSVG />

 

 

참고

https://velog.io/@yoonth95/SVG-%ED%8C%8C%EC%9D%BC-React-Component%EB%A1%9C-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0-Vite-TypeScript

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