vite+react ts에서 svg파일 component로 사용

svg파일을 컴포넌트화 시켜서 사용하려고 하던중 페이지에 렌더가 되지않고 화면 전체가 안나오는 오류가 있었다. CRA와 다르게 Vite에서는 플러그인 혹은 설정에서 svg 파일의 로딩 방식이 변경되어야 한다. Vite는 웹팩과 다른 도구이므로 Vite에 맞는 플러그인을 사용해햔다.

플러그인 설치

터미널에 아래와 같은 설치 명령어를 입력한다.

npm install vite-plugin-svgr

vite.config.js에 추가

설치가 완료되면 vite.config.js파일을 열어 vite-plugin-svgr 플러그인을 설정한다.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
});

custom.d.ts 추가

src/custom.d.ts파일을 추가해 TS가 svg파일에 대한 속성을 설정 해준다.

declare module '*.svg' {
    import React = require('react');
    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
    const src: string;
    export default src;
  }

tsconfig.json에 custom.d.ts호출

마지막으로 tsconfig.json파일을 열어 custom.d.ts을 호출해준다.

{
 "include": ["src", "src/custom.d.ts"],
}