로 사용하는 대신, React 컴포넌트로 처럼 직접 렌더링할 수 있도록 설정합니다."> 로 사용하는 대신, React 컴포넌트로 처럼 직접 렌더링할 수 있도록 설정합니다."> 로 사용하는 대신, React 컴포넌트로 처럼 직접 렌더링할 수 있도록 설정합니다.">

SVG 파일을 <img src="..." />로 사용하는 대신, React 컴포넌트로 <MyIcon />처럼 직접 렌더링할 수 있도록 설정합니다.

📦 1. 패키지 설치

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

⚙️ 2. vite.config.ts 설정

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'

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

🧾 3. 타입 선언 추가 (TypeScript 전용)

src/types/svg.d.ts 또는 src/vite-env.d.ts 파일을 만들어 아래 내용을 작성합니다:

declare module '*.svg?react' {
  import * as React from 'react'
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
  export default ReactComponent
}

🔔 이 설정은 TypeScript가 *.svg?react를 올바르게 인식하게 만듭니다.

🧪 4. 사용 방법

✅ SVG를 React 컴포넌트로 사용

import MyIcon from './assets/my-icon.svg?react'

function App() {
  return <MyIcon width={24} height={24} fill="black" />
}

https://github.com/pd4d10/vite-plugin-svgr