[SVGR] Next.js에서 SVGR 사용하기

 Next.js에서 SVGR을 사용하면 SVG 파일을 React 컴포넌트처럼 사용할 수 있습니다.

 

SVGR - Transforms SVG into React Components. - SVGR

목차

1. SVGR이란?

2. Next.js에 SVGR 설정하기

3. SVGR 사용 예시

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

1. SVGR이란?

SVG는 벡터 기반의 이미지 파일로, 용량이 작고 크기를 바꿔도 이미지가 깨지지 않기 때문에 웹에서 자주 사용되는 이미지 포맷입니다. Next.js 기반 프로젝트에서 SVG를 사용하는 방법은 크게 2가지입니다.

 

• svg 파일의 경로를 img 파일의 src 속성에 넣어 img 태그와 함께 사용
  

  <img src='~.svg' />

• svg 파일을 JSX 형태인 리액트 컴포넌트로 만들어 사용
  

  const PlusIcon = ({ props }) => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="48"
      height="48"
      viewBox="0 -960 960 960"
      {...props}
    >
      ...
    </svg>
  );
  
  export default PlusIcon;

  
  

두 방법 모두 장·단점이 있지만, svg를 리액트 컴포넌트 형태로 불러와 사용하면 props를 통해 크기, 색상 등을 커스텀할 수 있어 svg를 보다 다룰 수 있습니다.

 

아이콘이 많아질수록 일일이 컴포넌트를 만들어주는 작업을 하는 것은 굉장히 힘들고 비효율적인 일입니다.

svg 내부에 미리 지정되어 있는 속성들이 있다면 props를 통해 svg를 커스텀하기 위해 여러 가지 후처리가 필요합니다.

 

SVGR은 이런 작업을 자동으로 처리해 주는 라이브러리입니다. SVGR은 여러 가지 환경에서 단독으로도 사용할 수 있지만,

프로젝트에서 사용할 때는 주로 @svgr/webpack이라는 웹팩 로더를 사용하여 작업합니다.

 

2. Next.js에 SVGR 설정하기

설치

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

 

next.config.js에 webpack 설정 추가

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/, // SVG 파일을 찾습니다.
      use: [
        {
          loader: "@svgr/webpack", // SVGR 로더 사용
          options: {
            icon: true, // 기본적으로 SVG를 아이콘 크기로 조정
          },
        },
      ],
    });

    return config;
  },
};

export default nextConfig;

 

타입스크립트를 사용하신다면 아래와 같은 에러가 발생할 수 있습니다.

 

이는 TypeScript 상에서 .svg로 불러오는 컴포넌트에 대한 타입이 지정되어있지 않기 때문에 발생하는 문제입니다.

global.d.ts에 .svg 파일에 대한 타입을 선언해 주세요.

//global.d.ts
declare module "*.svg" {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

// tsconfig.json
{
  ....
  "include": [
    "global.d.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
  ],
  "exclude": ["node_modules"]
}

 

3. SVGR 사용 예시

React의 컴포넌트와 동일하게 import 하셔서 사용하시면 됩니다.

import Chip from "@/public/ic_chip.svg";

export default function Home() {
	return <Chip width={30} height={30}/>
}

 

추천글

[프로젝트] Taskify (태스키파이) 소개

 

프레임워크(Framework)와 라이브러리(Library)의 차이