Next.js 에서 SVG 파일을 import 해오는 방법

코드내부에서 SVG 파일을 import해서 쓰려면, svg파일이 컴파일러가 이해할 수 있는 코드로 변환이 필요하다.

그것을 도와주는 `@svgr/webpack` 을 설치하면 된다.

 

설치

npm i -D @svgr/webpack

or

yarn add -D @svgr/webpack

 

next.config.js 수정

// next.config.js
module.exports = {
   // ... 생략
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

 

결과

import Logo from 'assets/logo.svg'; // .svg 확장자도 써줘야합니다.

const App = () => {
  return (
    <div>
      {/*컴포넌트처럼 사용할 수 있으므로 속성을 추가할 수도 있습니다.*/}
      <Logo width="100" className="mx-auto" />
    </div>
  );
};