@svgr/webpack

1. 패키지 설치

svg 컴포넌트를 사용하기 위해 svgr을 설치했다.

npm i @svgr/webpack

2. next.config.mjs 수정

config 파일 수정

  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
      include: /src\/essets/,
    });
    return config;
  },

3. 사용

이후에는 컴포넌트로 사용하면 된다.
끝!

import Heart from '@/essets/heart.svg'

<Heart />