[nextjs] next.js에서 svg를 import하는 방법

next.js 프로젝트에서는 custom.d.ts에 추가하는 방식으로 되지 않습니다. (next.js를 사용하지 않을 경우)

Steps

1. @svgs/webpack 설치

npm install --save-dev @svgr/webpack

2. next.config.js 수정

• 아래와 같이 export object안에, webpack 함수를 추가해줍니다.

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

    return config;
  }
};

3. component에서 사용하기

• 사용은 일반 Component처럼 jsx로 사용하면 됩니다.

import Github from '../github.svg';

const Contact: React.FC = () => {
  return (
    <div>
      <div className='card-title'>CONTACT</div>
      <Github />
      <div>https://github.com/devstefancho</div>
    </div>
  );
};
export default Contact;

Ref

How To Import SVGs into NextJS