🔔

Conte um pouco como nosso site te ajudou em algum momento.



Como importar SVGs para NextJS


Se você gosta de nossos conteúdos então não deixe de compartilhar com seus contatos, assim você nos ajuda a alcançar mais pessoas, você também pode realizar uma pesquena doação, assim você ajudará a desenvolver mais conteúdos e tutoriais de qualidade!



Postado em: 20/12/2020 12:41:59
Publicidade

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  />

 

copyright ©2012 - 2021 JM Jonathan Moreira - Todos os direitos reservados