svgr을 사용하여 아이콘 컴포넌트 만들기

svgr을 사용하면, svg 파일을 리액트 컴포넌트로 쉽게 변환하여 관리할 수 있다.

아이콘 파일을 svg 형태로 저장해서 사용했는데, 각 아이콘들을 컴포넌트화하여 편하게 관리하기 위해서 svgr을 사용했다.

Next.js 환경에서는 기본적으로 웹팩을 사용하고 있어서, svgr 설정만 추가해주면 바로 리액트 컴포넌트로 import 해서 사용할 수 있다.

1. 패키지 설치

npm install --save-dev @svgr/webpack

2. next.config.ts 설정

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};
 
export default nextConfig;

3. package.json 세팅

2번까지만 하고 개별적으로 명령어를 입력하거나, 혹은 바로 import 해서 아이콘 파일을 사용할 수도 있지만, 여러개의 아이콘 파일을 한번에 올려서 사용하는 경우가 많으므로 package.json에 아예 명령어를 세팅해주었다.

src/app/_common/assets/icons에 있는 svg 파일을 src/app/_common/assets/icons/components 위치에 리액트 컴포넌트로 변환해준다.

4. 파일 변환

npm run svgr

터미널에 명령어를 입력해주면, 아래와 같이 자동으로 리액트 컴포넌트로 생성된다.

그리고 index.js 파일에서는 아이콘을 바로 export 해서 사용할 수 있다.