[Next.js] SVGR을 사용해서 SVG를 컴포넌트로 import하는 방법

1.  SVRG 설치

# NPM
npm install --save-dev @svgr/webpack

# Yarn 
yarn add --dev @svgr/webpack

 

 

 

2. next.config.js에  웹팩 구성 추가

[next.config.js에 추가하는 경우]

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

 

[next.config.mjs에 추가하는 경우]

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
};

export default nextConfig;

 

웹팩 구성으로 위의 코드를 추가하지 않으면 아래와 같은 오류가 발생합니다.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

 

 

 

3. svg 이미지를 컴포넌트로 import

import Note from '@public/svgs/note.svg';

const TodoList: React.FC = () => {

  return (
    <>
      <Note/>
    </>
  );
};

export default TodoList;

 

 

 

*svg 관련해서 폴더 구조 잡을때 아래 글도 참고하기 좋았습니다. 추천드립니다.

Next.js 폴더/파일 구조 잡기 (miriya.net)

Next.js 폴더/파일 구조 잡기

* 공식문서

https://blog.logrocket.com/import-svgs-next-js-apps/

How to import SVGs into your Next.js apps - LogRocket Blog