[NextJS] NextJS에서 컴포넌트형식으로 SVG사용하기

npm install -D @svgr/webpack

 

webpack을 설치합니다.

 

 

// next.config.js 설정

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

    return config;
  },
};

 

next.js 프로젝트를 처음 생성시 같이 생성되는 next.config.js를 설정해줍니다.

 

// 프로젝트 루트 폴더에 custom.d.ts 파일 생성

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

 

프로젝트 루트 폴더에 custom.d.ts 파일을 생성하고 위 코드를 넣어줍니다.

 

// tsconfig.json 수정

"include": ["custom.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]

 

next.js 프로젝트를 처음 생성시 같이 생성되는 tsconfig.json을 수정해줍니다.

 

사용하기

import Logo from "assets/icons/header/logo.svg";

<Logo/>