플러그인 설치

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

vite.config.ts 파일 수정

// vite.config.js
import svgr from "vite-plugin-svgr";

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

플러그인에 리액트가 있다면 이렇게 수정해준다

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

tsconfig.json 파일 수정

"compilerOptions": 
{
    [...rest...]
    "types": ["vite-plugin-svgr/client"] // 이부분 추가
},

필요한 컴포넌트에 사용하기

컴포넌트 이름은 반드시 앞이 대문자여야 한다. 주의!!

import { ReactComponent as MainTitle } from "../assets/img/mainTitle.svg";

const HeroSection = () => {
  return (
    <>
        <MainTitle /> 
    </>
  );
};

출처

[stackoverflow] Type definition for vite-plugin-svgr?