NextJS에서 SVG를 쉽게 사용할 수 있게 SVGR을 사용해보겠습니다.

SVG란?

SVG는 Scalable Vector Graphics의 약자로, 2차원 그래픽을 표현하기 위한 XML 기반 마크업 언어입니다.

• Scalable이란, 이미지 크기를 늘리거나 줄이더라도 화질에 영향을 받지 않는다는 의미힙니다.

---

SVGR을 사용하는 이유

SVGR을 사용하면 이 SVG 파일을 React 애플리케이션에서 쉽게 사용할 수 있는 컴포넌트로 바꿀 수 있습니다.

쉽게 말해서 SVG 파일을 가져와서 React 코드 안에서 바로 사용할 수 있게 해주는 도구입니다.

• SVG 파일을 React 컴포넌트로 변환: React 컴포넌트로 변환하여 코드 내에서 직접 사용할 수 있게 도와줍니다.
• SVG 최적화: SVG 파일을 최적화하여 파일 크기를 줄이고 로드 시간을 단축시킵니다.
• 사용자 정의 설정: 설정 옵션을 사용하여 사용자에 맞게 조정할 수 있습니다.

---

SVGR 사용하기

설치

@svgr/webpack를 설치해주셔야 사용할 수 있습니다.

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

설정

Next.js에서는 기본적으로 웹팩 플러그인을 지원합니다. 그러므로 next.config.js 파일에서 구성해주시면 됩니다.

해당 파일의 webpack을 사용해 기존 Next.js에서 사용하는 웹팩 설정을 수정하면 됩니다.

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

    return config;
  },
};

export default nextConfig;

SVG 아이콘 가져오기

이제 SVG 아이콘을 가져올 수 있습니다.

import EmptyIcon from '@/assets/icon/empty-item.svg';

<EmptyIcon width={20} height={20} fill={#FFF}/>

여기서 width와 height을 사용해서 넓이와 높이를 설정할 수 있습니다.

색상을 줄 때는 fill을 사용해서 할 수 있습니다.

---

참고

SVGR로 SVG를 React에 통합: viewBox 속성의 중요성

[Next.js] SVG 아이콘 사용하기 (@svgr/webpack)

[데이터 시각화] SVG 이미지란?