Consertando problemas com icones e google fontes no Next
Olá, seja muito bem vindo(a), no artigo em que tranbalhamos a criação de um CSS global: https://programacao-descomplicada.blogspot.com/2022/11/css-global-e-styled-components-em-um.html, eu adicionei um import de fontes do google fonts, porém no meu projeto o import da fonte não está funcionando então vou precisar de um head para o projeto.
Seguindo esse tutorial do Next: https://nextjs.org/docs/advanced-features/custom-document criei um arquivo _document na pasta pages e começo importando o necessário e adicionando um código inicial
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="pt-BR">
<Head>
<title>Play One</title>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Repare que o título já se encontra na página agora. Para completar o teste de funcionamento vou adicionar as tags de linkagem do Google fonts e pronto, a fonte foi devidamente carregada, o import retirado do CSS global e temos uma estrutura básica do HTML que podemos manipular, observando que se trata de um arquivo global.
Tudo que for feito no _document.js vai ser colocado no geral, sendo assim temos que fazer um head para cada página futura para modificar o <title> por exemplo, mas é simples e podemos fazer no arquivo da própria página, acredito.
Por fim, irei colocar um ícone do Iconify no projeto, como ele é React, vamos seguir outro passo-a-passo. Primeiro eu vou abrir um terminal para instalar o iconify no projeto.
npm install --save-dev @iconify/react
Após isso eu vou no index.js do componente de cabeçalho e importo o Iconify nele para poder usar o componente próprio passando o código do icone.
import { Icon } from '@iconify/react';
…
<Icon icon="ph:game-controller" />
Agora irei pegar o CSS feito para o ícone do projeto simples e vou adicionar para o componente deixando assim no final:
<Icon color="#628FD9" width="3rem" icon="ph:game-controller" />
Com isso o projeto ficou com uma cara bem melhor, falta apenas colocar o rodapé de volta e modificar algumas coisinhas para trabalhar com a pesquisa de produtos e um modo escuro para o site seriam interessante também. fico por aqui, um abraço e até a próxima.
Blog: https://programacao-descomplicada.blogspot.com/2022/12/consertando-problemas-com-icones-e.html
