vite + react + typescript 에서 svg import 방법

luna·2024년 9월 9일

현재 진행하는 프로젝트에서 소셜 로그인의 svg 파일을 넣고 싶은데 계속 아래와 같은 에러가 났다.

import 경로를 ...svg?react 로 변경해봐도 같은 에러가 나서 처음부터 천천히 다시 해보기로 한다.

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

1. vite-plugin-svgr 설치

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

2. `vite-env.d.ts` 파일에 `reference types` 추가

vite-env.d.ts

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

3. `vite.config.ts` plugins 에 svgr() 추가

vite.config.ts

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()],
});

4. `svg.d.ts` 파일 작성

svg.d.ts

declare module "*.svg?react" {
  import { FC, SVGProps } from "react";
  const ReactComponent: FC<SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}