Como usar Fontawesome no Next.js
Artigo publicado em 01 de março de 2021
––– visualizações
Eddwan Hallen
Instrutor & Co-fundador
Vamos apresentar neste artigo como usar o Fontawesome na versão 5 - free. Lembrando que o Fontawesome também possui uma versão paga.
Instalando as dependências com o yarn
yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/react-fontawesome
Você poderá utilizar o Fontawesome de duas formas, carregando individualmente cada icone nos seus componentes ou instanciando toda a biblioteca no seu arquivo _app.js
Importando cada ícone por componente
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
export default function MyComponent() {
return <FontAwesomeIcon icon={faCoffee} />
}
Importando a biblioteca no seu arquivo _app.js
Edite seu arquivo _app.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
library.add(fab, faCoffee)
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
No seu componente, importe o componente FontAwesomeIcon e então defina a tag icon com o nome do icone que desejar.
import { ReactElement } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
export default function IconFromLibrary() {
return (
<>
<FontAwesomeIcon icon={['fab', 'twitter']} />
<FontAwesomeIcon icon="coffee" />
</>
)
}
Registre-se na nossa newsletter
e mantenha-se informado sobre nossos novos treinamentos e artigos.