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!
Confira nossas super ofertas:
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 />