NextJS에서 SVGR 적용하는 방법

1. @svgr/webpack 설치하기

npm install @svgr/webpack --save-dev

NextJS에서 SVGR을 사용하기 위해서는 웹펙과 관련된 설정을 추가해야한다. 그렇기 때문에 우선 @svgr/webpack을 설치해준다.

2. NextJS에 웹펙 설정 추가하기

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
};

module.exports = nextConfig;

설치에 성공했다면 next.config.js 파일에 들어가 다음처럼 웹펙과 관련된 설정 코드를 추가해준다. svg 형식의 파일에는 @svgr/webpack을 적용해주겠다는 설정이다.

3. SVGR 사용하기

/public에 SVG 파일을 저장해둔 게 있다면, 이 파일을 이제 SVGR로 사용할 수 있다.

import AlertIcon from "../../public/svg/alert-icon.svg";

export default function Home() {
  return <AlertIcon />;
}

import AlertIcon from "../../public/svg/alert-icon.svg";

export default function Home() {
  return <AlertIcon className="alert-icon" />;
}

.alert-icon {
	/*스타일*/
}

SVG의 색상을 변경하고 싶다면 CSS 클래스를 추가해 수정할 수 있다.