React - SVGR 설치

26.02.03

1 min read

1. Vite project에서 SVGR 설치

npm install -D vite-plugin-svgr

2. 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 사용 시)

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

4. 사용 방법

Vite 방식

import Icon from '@/assets/icon.svg?react';

<Icon />

?react 를 붙여야 하는 이유
- Vite는 기본적으로 SVG를 URL으로 처리함
- 따라서 ?react를 붙여야 React Component로 변환됨

CRA(Create React App) 방식

import { ReactComponent as Icon } from './icon.svg';

구분	CRA	Vite
SVG React 변환	기본 내장	별도 plugin 필요
import 방식	`{ ReactComponent as Icon }`	`?react`
설정 접근	Webpack 숨김	설정 파일 명시적

1. Vite project에서 SVGR 설치
2. vite.config.ts 설정
3. 타입 선언 추가 (TypeScript 사용 시)
4. 사용 방법

KEEP READING

Woojin

구조적으로 사고하고, 근거 있게 구현하기 위해 기록합니다.