React 프로젝트에서 SVG 파일 최적화 및 컴포넌트화

React 프로젝트에서 SVG 파일을 효율적으로 사용하려면, SVGR을 이용해 SVG 파일을 React 컴포넌트로 변환하고, SVGO를 사용해 파일을 최적화할 수 있습니다. 이 글에서는 pnpm, Vite, React, TypeScript 환경에서 이를 구현하는 방법을 단계별로 설명합니다.

1. 필수 패키지 설치하기

먼저, 필요한 패키지를 설치합니다. pnpm을 사용하여 프로젝트의 개발 의존성으로 추가합니다.

pnpm add -D @svgr/rollup @svgr/cli svgo

• @svgr/rollup: Vite에서 SVGR을 사용할 수 있게 해주는 플러그인입니다.
• @svgr/cli: SVGR의 CLI 도구로, SVG를 React 컴포넌트로 변환합니다.
• svgo: SVG 파일을 최적화하는 도구입니다.

2. Vite 설정에 SVGR 추가하기

Vite 설정 파일에 SVGR 플러그인을 추가하여 SVG 파일을 React 컴포넌트로 변환할 수 있도록 합니다.

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

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

svg.d.ts 파일 수정하기 

TypeScript에서 SVG 파일을 모듈로 인식할 수 있도록 선언 파일을 추가합니다. src 디렉토리에 svg.d.ts 파일을 생성하고 다음 내용을 추가합니다:

// src/svg.d.ts
declare module '*.svg' {
  import React from 'react';
  const src: string;
  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<SVGSVGElement>
  >;
  export default src;
}

tsconfig.json 파일 수정하기 

TypeScript Config 설정에서 svg.d.ts 파일이 포함되도록 include 옵션에 다음 내용을 추가합니다:

{
	기존 컴파일 설정...
  	"include": ["src", "custom.d.ts", "svg.d.ts"]
   }

 

3. SVGO로 SVG 파일 최적화하기

SVGO는 SVG 파일에서 불필요한 데이터를 제거하여 최적화합니다. 터미널에서 직접 실행할 수 있습니다:

pnpm svgo path/to/your/file.svg -o path/to/your/optimized-file.svg

또는, SVGR 설정에 SVGO를 통합하여 자동으로 최적화되도록 할 수 있습니다:

    기존 vite 설정...
    svgr({
      svgoConfig: {
        plugins: [
          {
            name: "preset-default",
            params: {
              overrides: {
                removeViewBox: false,
              },
            },
          },
        ],
      },
    }),

4. React 컴포넌트로 SVG 사용하기

이제 프로젝트 내에서 SVG 파일을 React 컴포넌트처럼 사용할 수 있습니다:

import React from 'react';
import { ReactComonent as Logo } from './logo.svg';

const App = () => (
  <div>
    <Logo />
  </div>
);

export default App;