How to SVGR with Next.js

Config for Next version 12 and above.

Install

copy
1npm install --save-dev @svgr/webpack
2# or use yarn
3yarn add --dev @svgr/webpack

Next.js config

copy
1// next.config.js
2module.exports = {
3	webpack(config) {
4		// config of next 12 and above
5		config.module.rules.push({
6			test: /\.svg$/,
7			include: [options.dir],
8			use: [
9				'next-swc-loader',
10				{
11					loader: '@svgr/webpack',
12					options: { babel: false }
13				}
14			]
15		});
16
17		return config;
18	}
19};