next.js 에서 svg 사용방법

[c0c0pang]

1. npm i -D @svgr/webpack 설치
2. next.config.js 설정

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

module.exports = nextConfig;

3. 컴포넌트 형식으로 사용가능

import BUS from './image/bus.svg'
...
        <BUS />
...