[Next JS / React] Next JS에서 SVG 사용법

📌 svgr loader을 통해 컴포넌트로 사용

1.  @svgr/webpack 설치

npm i -D @svgr/webpack

2. Next.js의 구성 파일(next.config.js)을 열고, 다음과 같이 설정해 줍니다.

/** @type {import('next').NextConfig} */
const nextConfig = {

webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/i,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

module.exports = nextConfig;

3. 이제 SVG 파일을 컴포넌트로 변환하여 사용할 수 있습니다. 

import MySVG from '../components/MySVG.svg';

const MyComponent = () => {
  return (
    <div>
      <MySVG width={100} height={100} />
    </div>
  );
};

export default MyComponent;

위와 같이 SVG 파일을 컴포넌트로 가져올 수 있습니다. SVGR Loader를 사용하면 SVG 파일을 직접 다룰 필요 없이, 자동으로 컴포넌트로 변환하여 사용할 수 있습니다.

즉) SVGR Loader를 사용하여 SVG 파일을 컴포넌트로 변환하는 것은 코드의 가독성과 유지 보수성을 향상시키며, 개발자의 생산성을 높일 수 있는 장점을 제공합니다.

 

4.  type declaration

svg로 불러온 태그 타입이 any타입으로 되어있다.

 

global.d.ts 파일은 프로젝트의 전역에서 SVG 파일을 모듈로 인식하여 타입을 지정해줍니다.

이로써 Naver 컴포넌트는 SVG 요소에 대한 타입 정보를 갖게 됩니다.

//global.d.ts

declare module "*.svg" {
  import React from "react";
  const svg: React.FC<React.SVGProps<SVGSVGElement>>;
  export default svg;
}

그리고 tsconfig.json에 global.d.ts를 추가해준다.

//tsconfig.json

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

결과:

 

 

 

참고 :

SVGR - Transforms SVG into React Components. - SVGR

Next.js + typeScript에서 SVG 컴포넌트로 사용하기