SVG 파일을 리액트 컴포넌트로 손쉽게 변환하는 방법 - svgr

개요

리액트 프로젝트를 진행하던 중, 외부 svg 파일을 사용하기 위해서 vite-plugin-svgr이라는 라이브러리를 사용했습니다. 이 라이브러리는 svgr의 vite 지원 플러그인으로, raw svg 파일을 리액트 컴포넌트로 변환해 바로 사용할 수 있게 해준다는 특징이 있습니다.
프로젝트에서 사용하는 번들러가 webpack이라면 바로 svgr을 사용하면 되고, 저는 vite 번들러를 사용했기 때문에 vite-plugin-svgr을 사용했습니다.

설치 및 설정

react-svgr

설치

npm install --save-dev @svgr/webpack
# or use yarn
yarn add --dev @svgr/webpack

webpack.config.js 설정

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
}

vite-plugin-svgr

설치

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

# yarn
yarn add -D vite-plugin-svgr

# pnpm
pnpm add -D vite-plugin-svgr

vite.config.js 설정

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

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

사용법

import Star from './star.svg'

const Example = () => (
  <div>
    <Star />
  </div>
)

예시처럼 svg 파일을 임포트해서 리액트 컴포넌트처럼 사용할 수 있습니다.
vite-plugin-svgr을 사용하는 경우 다음과 같이 임포트 경로에 옵션을 추가해주어야 합니다.

import Star from './star.svg?react'