[React] Vite SVG 컴포넌트로 불러오기 (TypeScript 설정 추가)

Vite에서 Svg 컴포넌트로 불러오는 한국 자료가 없어서 직접 만들었습니다. 

React Vite Svg 컴포넌트로 불러오기 

 

기존 리액트 웹 팩을 사용하면 SVG를 컴포넌트로 사용하는 방법이 많이 있지만 , 만약 vite랑 typeScript를 사용한다면 

그냥 npm i vite-plugin-svgr 명령어만 쳐서는 동작하지 않습니다 ! 

 

https://www.npmjs.com/package/vite-plugin-svgr

vite-plugin-svgr

위 사이트를 보고 라이브 러리를 설치하고 , vite-config에 등록을 해줍니다 

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), svgr()],
});

 

import { ReactComponent as Logo } from './logo.svg'

이런식으로 사용하라고 나와 있는데 이런식으로 불르면 vite + typeScript 조합에서는 동작하지 않습니다.

 

설정 파일이 있는 폴더(tsconfig.json 있는곳)에서 custom.d.ts 파일을 만들어 줍니다.

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

위와 같이 코드를 입력을 해줍니다.

그리고 나서 tsconfig.json에 등록을 해줍니다.

 "include": ["src", "custom.d.ts"],

그리고 나서 사용을 하면 정상적으로 동작하는 것을 확인할 수 있습니다.