[Next.js] svg component in Next

1. webpack 설치

npm install -D @svgr/webpack

 

2. next.config.js 설정

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

    return config;
  },
};

 

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

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

 

4. tsconfig.json 수정

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

 

5. 사용

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

<Logo/>