No passado, para colocar um ícone de "lixeira" ou "lápis" em um site, você precisava baixar uma imagem PNG, colocar na pasta do projeto e usar a tag . Isso deixava o site pesado e era difícil mudar a cor do ícone.

Hoje, usamos o React Icons. Ele é uma biblioteca que reúne os pacotes de ícones mais famosos do mundo (como FontAwesome, Material Design e Feather Icons) e os transforma em Componentes React.

Vantagens:

Abra o terminal do VS Code, certifique-se de que está dentro da pasta do seu projeto e execute o comando abaixo:

npm i react-icons

Nota sobre o TypeScript: Muitas bibliotecas exigem que você instale um pacote extra de tipagem (ex: @types/nome-da-biblioteca). A boa notícia é que o react-icons já vem com suporte nativo ao TypeScript. O comando acima é tudo que você precisa!

O React Icons funciona como um grande catálogo de coleções. Para usar um ícone, você precisa entender a regra do prefixo.

  1. Acesse o site oficial: https://react-icons.github.io/react-icons/
  2. Use a barra de pesquisa (Search) para procurar um ícone (dica: pesquise em inglês, ex: trash, edit, user).
  3. Repare no nome do ícone escolhido. As duas primeiras letras indicam de qual coleção ele veio.
    • Exemplo: FaTrash vem do FontAwesome.
    • Exemplo: MdEdit vem do Material Design.
    • Exemplo: FiUser vem do Feather Icons.

A regra de importação é: Você deve importar o ícone da pasta correspondente às suas duas primeiras letras, tudo em minúsculo.

// ❌ Errado: Importar de forma genérica
import { FaTrash } from 'react-icons';

// ✅ Certo: O ícone começa com 'Fa', então importamos da pasta '/fa'
import { FaTrash } from 'react-icons/fa';

// ✅ Certo: O ícone começa com 'Md', então importamos da pasta '/md'
import { MdEdit } from 'react-icons/md';

Vamos criar um componente de botão simples para ver o ícone funcionando na prática.

Crie um arquivo chamado BotaoDeletar.tsx e cole o código abaixo. Leia os comentários para entender como o ícone é inserido.

// 1. Importamos o ícone de lixeira da coleção FontAwesome (fa)
import { FaTrash } from 'react-icons/fa';

export default function BotaoDeletar() {
  return (
    // Um botão HTML comum
    <button style={{ backgroundColor: '#ff003c', color: 'white', padding: '10px' }}>
      
      {/* 2. O ícone é chamado como se fosse uma tag HTML normal (um componente) */}
      <FaTrash /> 
      
      {/* 3. Colocamos um espaço e o texto do botão */}
      {' '} Excluir
    </button>
  );
}

O ícone aceita configurações chamadas de Props. As duas mais importantes são:

Veja como configurar:

import { FaCheckCircle } from 'react-icons/fa';

export default function MensagemSucesso() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
      
      {/* Aqui personalizamos o ícone passando o tamanho de 30px e a cor verde neon */}
      <FaCheckCircle size={30} color="#39ff14" />
      
      <p style={{ color: '#39ff14' }}>Produto salvo com sucesso!</p>
    </div>
  );
}

Agora vamos juntar o que aprendemos com a Tabela de Produtos que criamos na aula anterior. Adicionaremos ícones visuais para as ações de "Editar" e "Excluir".

Abra o seu arquivo Produtos/index.tsx e modifique a parte dos botões de ação para ficar assim:

// 1. Importamos os Hooks do React e o Link do React Router
import { useState, useEffect } from 'react';
import { Link } from 'react-router'; // (Aviso: Em algumas versões pode ser 'react-router-dom')

// 2. Importamos os ÍCONES: O lápis (MdEdit) e a Lixeira (FaTrash)
import { MdEdit } from 'react-icons/md';
import { FaTrash } from 'react-icons/fa';

// 3. Importamos nossos dados
import { TipoProduto } from '../../types/types';
import { listaProdutos } from '../../data/listaProdutos';

export default function Produtos() {
  const [produtos, setProdutos] = useState<TipoProduto[]>([]);

  useEffect(() => {
    setProdutos(listaProdutos);
  }, []);

  return (
    <main style={{ padding: '20px', backgroundColor: '#0d0d0d', color: '#39ff14', minHeight: '100vh' }}>
      <h1>Painel de Produtos com Ícones</h1>
      
      <table border={1} cellPadding={10} style={{ width: '100%', borderCollapse: 'collapse', borderColor: '#39ff14' }}>
        <thead>
          <tr style={{ backgroundColor: '#1a1a1a', color: '#ff00ff' }}>
            <th>ID</th>
            <th>Nome</th>
            <th>Ações</th>
          </tr>
        </thead>
        <tbody>
          {produtos.map((item) => (
            <tr key={item.id} style={{ borderBottom: '1px solid #39ff14' }}>
              <td>{item.id}</td>
              <td>{item.nome}</td>
              
              {/* --- COLUNA DE AÇÕES COM OS ÍCONES --- */}
              <td style={{ display: 'flex', gap: '15px' }}>
                
                {/* Botão de Editar usando o Ícone de Lápis */}
                <Link to={`/editar-produtos/${item.id}`} style={{ color: '#00ffff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '5px' }}>
                  {/* Tamanho 20px, herdando a cor azul cyan do Link */}
                  <MdEdit size={20} /> 
                  Editar
                </Link>

                {/* Botão de Excluir usando o Ícone de Lixeira */}
                <button style={{ backgroundColor: 'transparent', border: 'none', color: '#ff003c', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '5px' }}>
                  {/* Tamanho 18px e cor vermelha para alerta de perigo */}
                  <FaTrash size={18} color="#ff003c" /> 
                  Excluir
                </button>

              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </main>
  );
}