[TIL] Vite 환경에서 SVG 컴포넌트로 사용하기

Vite 환경에서 바로 SVG 파일을 ReactComponent로 사용하려 한다면 오류가 발생할 것이다

 

vite-plugin-svgr 패키지를 사용하면 된다🔽

vite-plugin-svgr

 

터미널로 패키지를 설치해주자

yarn add -D vite-plugin-svgr

 

[vite.config.ts]

...
import svgr from 'vite-plugin-svgr'

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

플러그인에 svgr을 추가해준다

 

[src/vite-env.d.ts]

...
/// <reference types="vite-plugin-svgr/client" />

TS를 사용한다면 타입 정의 파일에 위 내용을 추가해준다

 

[src/assets/svg/index.ts]

export { ReactComponent as LogoWhiteSVG } from "@/assets/svg/logo_white.svg";

이제 오류가 생기지 않을 것이다!