Como importar SVGs para NextJS

Fala pessoal blz?

Então sempre tive uma dúvida de como usar arquivos svg em meu projeto Nextjs, depois de pesquisar muito e para não perder a informação de como usar para os meus próximos projetos, então resolvi postar aqui, assim quem tiver a mesa dificuldade que eu tive para importar arquivos svg no Nextjs esse mini tutorial vai te ajudar, espero que gostem da dica.

um abraço.

1º Passo

Crie na raiz do projeto caso não exista um arquivo com o nome “next.config.js” e coloque o seguinte conteúdo:

 module.exports = {
   webpack(config) {
     config.module.rules.push({
       test: /.svg$/,
       issuer: {
         test: /.(js|ts)x?$/,
       },
       use: ['@svgr/webpack'],
     })

     return config
   },
 }

2º instale o @svgr/webpack

 npm install @svgr/webpack --save-dev
 # or use yarn
 yarn add @svgr/webpack --dev

3º Passo - Como utilizar

Em seu arquivo js ou tsx que contém seu layout import o arquivo da seguinte maneira:

 import NomeParaSeuArquivo from '../assets/meu_arquivo.svg'

Depois basta chamá-lo na parte do seu layout que deseja ser exibido

 <NomeParaSeuArquivo  />