React SVGR, svg파일을 컴포넌트화 시키기

React SVGR

svg파일을 리액트 컴포넌트처럼 사용가능하고, SVGProp을 받을 수 있도록, svg파일을 쉽게 사용할 수 있도록 도와주는 라이브러리이다. 패키지매니저별로 플러그인이 다르지만 여기서는 vite기준으로 알아보자

config 설정

// 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(), // 필요에 따라 svgr옵션 추가
  ],
});

타입정의

타입스크립트가 SVG를 컴포넌트로 인식하도록 설정.
svg파일을 import할때, "*.svg?react"포멧으로 import

// vite-env.d.ts
declare module "*.svg?react" {
  import * as React from "react";
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

활용 예시

import LogoIcon from '@/assets/icon/logo.svg?react'
const Example = () => {
	return (
    	<>
		 ...
         <LogoIcon width={50} height={50} className fill .../>
        </>
    )
}

이미지 포멧에 대해

svg는 벡터 기반 이미지 포멧으로 픽셀 단위를 사용하는(래스터) png, jpg, jpeg 등과 근본적으로 달라서 확대/축소에도 깨지지 않고 선명함. 또한 작은 파일 크기, SEO, 반응형, 고해상도(레티나)에 대응 가능하다.

상황별 사용

로고, 아이콘, UI 일러스트, 단순 그래픽 -> SVG (복잡할경우 리소스가 매우 커짐)

사진, 복잡한 이미지 -> JPG / JPEG (이 경우에만 추천)

투명 배경의 래스터 이미지, 세밀한 그래픽, 무손실 품질이 필요할 때 -> PNG