[React] vite + ts에서 svg component 사용하기

 

 

vite-plugin-svgr 라이브러리를 사용하여  svg 파일을 리액트 컴포넌트로 변환할 수 있다.

 

npm i -D vite-plugin-svgr
yarn add -D vite-plugin-svgr

// vite.config.js
import svgr from 'vite-plugin-svgr'

export default {
  // ...
  plugins: [svgr()],
}

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

 

ts에서 사용하려면 추가적으로 설정을 해야한다.

// vite-env.d.ts

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

// svg.d.ts

declare module "*.svg" {
  const content: React.FC<React.SVGProps<SVGElement>>;
  export default content;
}

// tsconfig.json

{
  "include": ["svg.d.ts"],
}

 

 

.d.ts 파일은 기존 js 모듈을 ts에서 사용할 수 있도록 타입을 정의할 수 있는 파일이다.

모든 svg 파일에 React.FC<React.SVGProps<SVGElement>> 타입을 정의하여 ts에서 알리는 코드이다.