Как настроить nextjs для импорта svg?

Question

[a2d7cc]

Использую плагин svgr плагин, чтобы загружать svg файлы как компоненты. При этом теряется возможность импортировать их как ссылку для передачи в img тэг или мета тэги. Подскажите как можно модифицировать конфиг нэкста, в документациях не нашел решения для этого. Хочу импортировать как компонент и при желании просто ссылкой на картинку добавлять logo.svg?url. Все статьи по настройке непосредственно к вебпаку, но в контексте нэкста не знаю как на нем это сделать.

Код

/** @type {import('next').NextConfig} */
const nextConfig = {
	poweredByHeader: false,
	optimizeFonts: false,

		webpack: (config, options) => {
		config.module.rules.push({
			test: /\.svg$/i,
			use: [
				{
					loader: '@svgr/webpack',
					options: {
						icon: true,
						prettier: true,
						svgo: true,
						titleProp: true,
						ref: true,
					},
				},
			],
		})

		return config
	},
}

 ref: true,
 */

module.exports = nextConfig

Answer 1

[tanasov49]

Сам искал довольно долго. Вот решение оно мне помогло
https://react-svgr.com/docs/next/