SVG를 리액트 컴포넌트로 사용하기

아이콘이나 로고 같은 벡터 이미지를 동적으로 스타일링하거나 상호작용을 추가하고 싶을 때 SVG를 컴포넌트화하여 편하게 사용할 수 있습니다.

 

import Logo from './assets/Logo.svg?react'; //기본 svg에 ?react 추가

function App() {
  return (
    <div>
      {/* 일반 React 컴포넌트처럼 사용 가능 */}
      <Logo width={50} height={50} className="my-logo" />
    </div>
  );
}

 

?react의 작동 원리

?react 쿼리 파라미터를 사용하면 Vite는 내부적으로 SVGR을 사용하여 SVG 파일을 React 컴포넌트로 변환합니다. 이 과정에서 다음과 같은 일이 일어납니다:

SVG 파일의 XML 코드를 분석합니다.

1. SVG 요소를 JSX로 변환합니다.
2. 적절한 props를 전달할 수 있는 React 컴포넌트를 생성합니다.

SVG를 리액트 컴포넌트화 하여 사용하는 것의 장점

1. React props를 통한 속성 제어 가능
2. CSS-in-JS, styled-components 등과 함께 사용 가능
3. 이벤트 핸들러 연결 가능
4. React의 상태에 따라 동적으로 SVG 요소 변경 가능 (조건부 처리와 같이)

Vite에서 설정하기

Vite 프로젝트에서 ?react 쿼리를 사용하려면 vite-plugin-svgr 플러그인을 설치해야 합니다:

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

그리고 Vite 설정 파일(vite.config.js 또는 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()],
});