[Sugestão] Criar ícone de favoritos com a biblioteca FontAwesome

Só uma dica mesmo!

A FontAwesome (https://fontawesome.com/) é uma biblioteca de ícones muita famosa na internet e ela está disponível para vários frameworks JS e também para HTML 5 puro e React.

Para instalá-la no projeto o comando é:

npm i --save @fortawesome/fontawesome-svg-core && npm i --save @fortawesome/free-solid-svg-icons && npm i --save @fortawesome/free-regular-svg-icons && npm i --save @fortawesome/free-brands-svg-icons && npm i --save @fortawesome/react-fontawesome

Depois, basta ir no site, procurar o ícone que deseja usar, clicar sobre ele e no modal que abre, clicar em React, depois em "Individual import" e colar o código disponível. Obviamente, não se pode esquecer de fazer as importações, tanto do componente FontAwesome quanto do ícone.

No meu caso, fiz o seguinte:

import styles from './Card.module.css'
import { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart as iconeFavoritar } from '@fortawesome/free-regular-svg-icons'
import { faHeart as iconeDesfavoritar } from '@fortawesome/free-solid-svg-icons'

export default function Card({capa, titulo}) {

    const [favorito, setFavorito] = useState(false)

    function mudarFavorito() {
        setFavorito(!favorito)
    }

    return (
        <article className={styles.container}>
            <img src={capa} alt={titulo} className={styles.capa} />
            <h2>{titulo}</h2>
            <FontAwesomeIcon
                icon={favorito ? iconeDesfavoritar : iconeFavoritar}
                className={styles.favoritar}
                onClick={mudarFavorito}
            />
        </article>
    )
}

OBS.: Na hora de estilizar, é preciso tratá-lo como texto, ou seja, ao invés de width é preciso usar font-size, por exemplo.