Ícones do React

Q: O que IconContext.Provider faz e onde ele deve ser colocado?

Ele define size, color, className e style padrão para todos os ícones descendentes. Ele usa React Context, portanto, deve ser um Client Component no Next.js App Router. Envolva-o em qualquer subárvore onde você queira estilização de ícones consistente.

Q: Como os ícones do React herdam seu tamanho e cor por padrão?

Os ícones renderizam como SVGs inline usando 1em para tamanho e currentColor para cor. Eles herdam font-size e color de seu elemento pai automaticamente.

Q: Qual tipo TypeScript você deve usar para um ícone do React Icons passado como prop?

IconType é equivalente a React.ComponentType.

Q: O que é IconBaseProps e o que ele estende?

IconBaseProps estende SVGAttributes. Ele adiciona as propriedades size, color, title e className. IconContext é tipado como React.Context.

Q: A prop size aceita strings, números ou ambos?

Aceita ambos, strings (por exemplo, "1.5rem") e números. Ao usar um número, ele é mapeado para pixels.

Receita

Instale o React Icons para acessar milhares de ícones de famílias populares através de um único pacote. Cada família de ícones usa um prefixo de duas letras e seu próprio caminho de importação para o tree-shaking.

npm install react-icons

// app/components/icon-sampler.tsx
"use client";
 
import { FaGithub, FaTwitter } from "react-icons/fa";
import { MdEmail, MdSettings } from "react-icons/md";
import { HiOutlineSearch } from "react-icons/hi";
import { FiMenu } from "react-icons/fi";
 
export function IconSampler() {
  return (
    <div className="flex items-center gap-4 text-2xl">
      <FaGithub />
      <FaTwitter className="text-blue-400" />
      <MdEmail className="text-red-500" />
      <MdSettings className="text-gray-600" />
      <HiOutlineSearch />
      <FiMenu />
    </div>
  );
}

Conjuntos de Ícones Disponíveis

Prefixo	Conjunto de Ícones	Contagem de Ícones	Estilo
Fa	Font Awesome 5	1.600+	Sólido e regular
Fa6	Font Awesome 6	2.000+	Sólido, regular, marcas
Md	Material Design	4.300+	Preenchido e contornado
Hi	Heroicons v1	450+	Contornado e sólido
Hi2	Heroicons v2	600+	Contornado, sólido, mini
Fi	Feather Icons	280+	Baseado em traço
Bs	Bootstrap Icons	1.800+	Preenchido e contornado
Ai	Ant Design	780+	Preenchido e contornado
Si	Simple Icons (marcas)	2.500+	Logos de marcas
Tb	Tabler Icons	4.600+	Baseado em traço
Lu	Lucide	1.400+	Baseado em traço

Exemplo de Trabalho

Uma barra de links de mídia social usando ícones de várias famílias:

// app/components/social-links.tsx
"use client";
 
import { FaGithub, FaLinkedinIn, FaYoutube } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";
import { SiBluesky, SiDiscord } from "react-icons/si";
import { IconContext } from "react-icons";
 
interface SocialLink {
  href: string;
  icon: React.ElementType;
  label: string;
  hoverColor: string;
}
 
const socialLinks: SocialLink[] = [
  { href: "https://github.com/username", icon: FaGithub, label: "GitHub", hoverColor: "hover:text-gray-900" },
  { href: "https://x.com/username", icon: FaXTwitter, label: "X (Twitter)", hoverColor: "hover:text-black" },
  { href: "https://linkedin.com/in/username", icon: FaLinkedinIn, label: "LinkedIn", hoverColor: "hover:text-blue-700" },
  { href: "https://youtube.com/@username", icon: FaYoutube, label: "YouTube", hoverColor: "hover:text-red-600" },
  { href: "https://bsky.app/profile/username", icon: SiBluesky, label: "Bluesky", hoverColor: "hover:text-blue-500" },
  { href: "https://discord.gg/invite", icon: SiDiscord, label: "Discord", hoverColor: "hover:text-indigo-500" },
];
 
export function SocialLinksBar() {
  return (
    <IconContext.Provider value={{ size: "1.5rem" }}>
      <nav aria-label="Links de mídia social" className="flex items-center gap-6">
        {socialLinks.map(({ href, icon: Icon, label, hoverColor }) => (
          <a
            key={label}
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={label}
            className={`text-gray-500 transition-colors ${hoverColor}`}
          >
            <Icon />
          </a>
        ))}
      </nav>
    </IconContext.Provider>
  );
}

Análise Detalhada

Como Funciona

React Icons agrupa muitas bibliotecas de ícones em um único pacote npm, mas as organiza por caminho de importação (react-icons/fa, react-icons/md, etc.).
Cada caminho de importação corresponde a uma família de ícones, e os bundlers fazem o tree-shake de ícones não utilizados dentro dessa família.
Os ícones renderizam como elementos SVG inline. Eles herdam font-size e color de seu pai por padrão (usando 1em e currentColor).
IconContext.Provider permite definir size, color, className e style padrão para todos os ícones descendentes sem repetir props.

Variações

Estilização global com IconContext:

import { IconContext } from "react-icons";
 
export function IconProvider({ children }: { children: React.ReactNode }) {
  return (
    <IconContext.Provider
      value={{
        size: "1.25rem",
        className: "inline-block align-middle",
        style: { verticalAlign: "middle" },
      }}
    >
      {children}
    </IconContext.Provider>
  );
}

Comparando o impacto do tamanho do bundle:

// BOM: importa apenas FaGithub (~1KB)
import { FaGithub } from "react-icons/fa";
 
// RUIM: ainda importa apenas FaGithub, mas algumas configurações de bundler mais antigas
// podem não fazer o tree-shake corretamente
import { FaGithub } from "react-icons";

Sempre importe do caminho específico da família (react-icons/fa) em vez da raiz do pacote.

Notas de TypeScript

Todos os ícones são tipados como React.ComponentType<IconBaseProps>.
IconBaseProps estende SVGAttributes<SVGElement> e adiciona as propriedades size, color, title e className.
IconContext é tipado como React.Context<IconBaseProps>.

import type { IconType } from "react-icons";
 
interface NavItem {
  icon: IconType;
  label: string;
  href: string;
}

Armadilhas

Importar de react-icons (a raiz) em vez de um sub-caminho como react-icons/fa pode agrupar toda a biblioteca em algumas configurações. Sempre use o caminho específico da família.
Diferentes famílias de ícones têm tamanhos padrão e pesos visuais diferentes. Um ícone do Font Awesome ao lado de um ícone Feather pode parecer desalinhado sem dimensionamento explícito.
IconContext usa React Context, portanto, o componente provedor deve ser um Client Component no Next.js App Router.
Algumas famílias de ícones incluem apenas variantes preenchidas (Font Awesome solid), enquanto outras são baseadas em traços (Feather). Misturar estilos pode parecer inconsistente.
A prop size aceita uma string (como "1.5rem") ou um número. Ao usar um número, ele é mapeado para pixels.

Alternativas

Abordagem	Prós	Contras
React Icons	Um pacote para muitas famílias de ícones	Grande tamanho de instalação no disco, potencial inchaço do bundle
Lucide React	Melhor tree-shaking, estilo consistente	Apenas um estilo de ícone
Biblioteca de ícones direta (@heroicons/react)	Pacote oficial, integração mais estreita	Apenas uma família de ícones por pacote
Sprites SVG	Menor bundle possível	Configuração manual, sem API de componente

FAQs

Como você importa ícones de diferentes famílias no React Icons?

Cada família tem seu próprio caminho de importação usando um prefixo de duas letras:

import { FaGithub } from "react-icons/fa";     // Font Awesome
import { MdEmail } from "react-icons/md";       // Material Design
import { HiOutlineSearch } from "react-icons/hi"; // Heroicons

O que `IconContext.Provider` faz e onde ele deve ser colocado?

Ele define size, color, className e style padrão para todos os ícones descendentes.
Ele usa React Context, portanto, deve ser um Client Component no Next.js App Router.
Envolva-o em qualquer subárvore onde você queira estilização de ícones consistente.

Armadilha: O que acontece se você importar de `react-icons` em vez de `react-icons/fa`?

Importar da raiz do pacote em vez de um sub-caminho pode agrupar toda a biblioteca em algumas configurações.
Sempre use o caminho específico da família (por exemplo, react-icons/fa, react-icons/md) para um tree-shaking adequado.

Como os ícones do React herdam seu tamanho e cor por padrão?

Os ícones renderizam como SVGs inline usando 1em para tamanho e currentColor para cor.
Eles herdam font-size e color de seu elemento pai automaticamente.

Por que ícones de diferentes famílias podem parecer desalinhados quando colocados lado a lado?

Diferentes famílias têm tamanhos padrão e pesos visuais diferentes.
Ícones do Font Awesome são preenchidos; ícones Feather são baseados em traços.
Use dimensionamento explícito e famílias consistentes, ou normalize com IconContext.

Qual tipo TypeScript você deve usar para um ícone do React Icons passado como prop?

import type { IconType } from "react-icons";
 
interface NavItem {
  icon: IconType;
  label: string;
  href: string;
}

IconType é equivalente a React.ComponentType<IconBaseProps>.

O que é `IconBaseProps` e o que ele estende?

IconBaseProps estende SVGAttributes<SVGElement>.
Ele adiciona as propriedades size, color, title e className.
IconContext é tipado como React.Context<IconBaseProps>.

Como definir um tamanho de ícone global e alinhamento vertical para todos os ícones?

<IconContext.Provider
  value={{
    size: "1.25rem",
    className: "inline-block align-middle",
    style: { verticalAlign: "middle" },
  }}
>
  {children}
</IconContext.Provider>

A prop `size` aceita strings, números ou ambos?

Aceita ambos, strings (por exemplo, "1.5rem") e números.
Ao usar um número, ele é mapeado para pixels.

Armadilha: Você pode misturar famílias de ícones preenchidas e baseadas em traços sem problemas visuais?

Não. Misturar estilos (por exemplo, Font Awesome sólido com Feather tracejado) parece inconsistente.
Mantenha uma família de ícones para um peso visual consistente, ou normalize cuidadosamente tamanhos e traços.

Quantas famílias de ícones o React Icons inclui e qual tem mais ícones?

React Icons inclui mais de 11 famílias de ícones em um único pacote.
Tabler Icons (prefixo Tb) tem o maior número com mais de 4.600 ícones.
Material Design (Md) segue com mais de 4.300 ícones.

Links Relacionados

Receita

npm install react-icons

// app/components/icon-sampler.tsx
"use client";
 
import { FaGithub, FaTwitter } from "react-icons/fa";
import { MdEmail, MdSettings } from "react-icons/md";
import { HiOutlineSearch } from "react-icons/hi";
import { FiMenu } from "react-icons/fi";
 
export function IconSampler() {
  return (
    <div className="flex items-center gap-4 text-2xl">
      <FaGithub />
      <FaTwitter className="text-blue-400" />
      <MdEmail className="text-red-500" />
      <MdSettings className="text-gray-600" />
      <HiOutlineSearch />
      <FiMenu />
    </div>
  );
}

Conjuntos de Ícones Disponíveis

Prefixo	Conjunto de Ícones	Contagem de Ícones	Estilo
Fa	Font Awesome 5	1.600+	Sólido e regular
Fa6	Font Awesome 6	2.000+	Sólido, regular, marcas
Md	Material Design	4.300+	Preenchido e contornado
Hi	Heroicons v1	450+	Contornado e sólido
Hi2	Heroicons v2	600+	Contornado, sólido, mini
Fi	Feather Icons	280+	Baseado em traço
Bs	Bootstrap Icons	1.800+	Preenchido e contornado
Ai	Ant Design	780+	Preenchido e contornado
Si	Simple Icons (marcas)	2.500+	Logos de marcas
Tb	Tabler Icons	4.600+	Baseado em traço
Lu	Lucide	1.400+	Baseado em traço

Exemplo de Trabalho

Uma barra de links de mídia social usando ícones de várias famílias:

// app/components/social-links.tsx
"use client";
 
import { FaGithub, FaLinkedinIn, FaYoutube } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";
import { SiBluesky, SiDiscord } from "react-icons/si";
import { IconContext } from "react-icons";
 
interface SocialLink {
  href: string;
  icon: React.ElementType;
  label: string;
  hoverColor: string;
}
 
const socialLinks: SocialLink[] = [
  { href: "https://github.com/username", icon: FaGithub, label: "GitHub", hoverColor: "hover:text-gray-900" },
  { href: "https://x.com/username", icon: FaXTwitter, label: "X (Twitter)", hoverColor: "hover:text-black" },
  { href: "https://linkedin.com/in/username", icon: FaLinkedinIn, label: "LinkedIn", hoverColor: "hover:text-blue-700" },
  { href: "https://youtube.com/@username", icon: FaYoutube, label: "YouTube", hoverColor: "hover:text-red-600" },
  { href: "https://bsky.app/profile/username", icon: SiBluesky, label: "Bluesky", hoverColor: "hover:text-blue-500" },
  { href: "https://discord.gg/invite", icon: SiDiscord, label: "Discord", hoverColor: "hover:text-indigo-500" },
];
 
export function SocialLinksBar() {
  return (
    <IconContext.Provider value={{ size: "1.5rem" }}>
      <nav aria-label="Links de mídia social" className="flex items-center gap-6">
        {socialLinks.map(({ href, icon: Icon, label, hoverColor }) => (
          <a
            key={label}
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={label}
            className={`text-gray-500 transition-colors ${hoverColor}`}
          >
            <Icon />
          </a>
        ))}
      </nav>
    </IconContext.Provider>
  );
}

Análise Detalhada

Como Funciona

React Icons agrupa muitas bibliotecas de ícones em um único pacote npm, mas as organiza por caminho de importação (react-icons/fa, react-icons/md, etc.).
Cada caminho de importação corresponde a uma família de ícones, e os bundlers fazem o tree-shake de ícones não utilizados dentro dessa família.
Os ícones renderizam como elementos SVG inline. Eles herdam font-size e color de seu pai por padrão (usando 1em e currentColor).
IconContext.Provider permite definir size, color, className e style padrão para todos os ícones descendentes sem repetir props.

Variações

Estilização global com IconContext:

import { IconContext } from "react-icons";
 
export function IconProvider({ children }: { children: React.ReactNode }) {
  return (
    <IconContext.Provider
      value={{
        size: "1.25rem",
        className: "inline-block align-middle",
        style: { verticalAlign: "middle" },
      }}
    >
      {children}
    </IconContext.Provider>
  );
}

Comparando o impacto do tamanho do bundle:

// BOM: importa apenas FaGithub (~1KB)
import { FaGithub } from "react-icons/fa";
 
// RUIM: ainda importa apenas FaGithub, mas algumas configurações de bundler mais antigas
// podem não fazer o tree-shake corretamente
import { FaGithub } from "react-icons";

Sempre importe do caminho específico da família (react-icons/fa) em vez da raiz do pacote.

Notas de TypeScript

Todos os ícones são tipados como React.ComponentType<IconBaseProps>.
IconBaseProps estende SVGAttributes<SVGElement> e adiciona as propriedades size, color, title e className.
IconContext é tipado como React.Context<IconBaseProps>.

import type { IconType } from "react-icons";
 
interface NavItem {
  icon: IconType;
  label: string;
  href: string;
}

Armadilhas

Importar de react-icons (a raiz) em vez de um sub-caminho como react-icons/fa pode agrupar toda a biblioteca em algumas configurações. Sempre use o caminho específico da família.
Diferentes famílias de ícones têm tamanhos padrão e pesos visuais diferentes. Um ícone do Font Awesome ao lado de um ícone Feather pode parecer desalinhado sem dimensionamento explícito.
IconContext usa React Context, portanto, o componente provedor deve ser um Client Component no Next.js App Router.
Algumas famílias de ícones incluem apenas variantes preenchidas (Font Awesome solid), enquanto outras são baseadas em traços (Feather). Misturar estilos pode parecer inconsistente.
A prop size aceita uma string (como "1.5rem") ou um número. Ao usar um número, ele é mapeado para pixels.

Alternativas

Abordagem	Prós	Contras
React Icons	Um pacote para muitas famílias de ícones	Grande tamanho de instalação no disco, potencial inchaço do bundle
Lucide React	Melhor tree-shaking, estilo consistente	Apenas um estilo de ícone
Biblioteca de ícones direta (@heroicons/react)	Pacote oficial, integração mais estreita	Apenas uma família de ícones por pacote
Sprites SVG	Menor bundle possível	Configuração manual, sem API de componente

FAQs

Como você importa ícones de diferentes famílias no React Icons?

Cada família tem seu próprio caminho de importação usando um prefixo de duas letras:

import { FaGithub } from "react-icons/fa";     // Font Awesome
import { MdEmail } from "react-icons/md";       // Material Design
import { HiOutlineSearch } from "react-icons/hi"; // Heroicons

O que `IconContext.Provider` faz e onde ele deve ser colocado?

Ele define size, color, className e style padrão para todos os ícones descendentes.
Ele usa React Context, portanto, deve ser um Client Component no Next.js App Router.
Envolva-o em qualquer subárvore onde você queira estilização de ícones consistente.

Armadilha: O que acontece se você importar de `react-icons` em vez de `react-icons/fa`?

Importar da raiz do pacote em vez de um sub-caminho pode agrupar toda a biblioteca em algumas configurações.
Sempre use o caminho específico da família (por exemplo, react-icons/fa, react-icons/md) para um tree-shaking adequado.

Como os ícones do React herdam seu tamanho e cor por padrão?

Os ícones renderizam como SVGs inline usando 1em para tamanho e currentColor para cor.
Eles herdam font-size e color de seu elemento pai automaticamente.

Por que ícones de diferentes famílias podem parecer desalinhados quando colocados lado a lado?

Diferentes famílias têm tamanhos padrão e pesos visuais diferentes.
Ícones do Font Awesome são preenchidos; ícones Feather são baseados em traços.
Use dimensionamento explícito e famílias consistentes, ou normalize com IconContext.

Qual tipo TypeScript você deve usar para um ícone do React Icons passado como prop?

import type { IconType } from "react-icons";
 
interface NavItem {
  icon: IconType;
  label: string;
  href: string;
}

IconType é equivalente a React.ComponentType<IconBaseProps>.

O que é `IconBaseProps` e o que ele estende?

IconBaseProps estende SVGAttributes<SVGElement>.
Ele adiciona as propriedades size, color, title e className.
IconContext é tipado como React.Context<IconBaseProps>.

Como definir um tamanho de ícone global e alinhamento vertical para todos os ícones?

<IconContext.Provider
  value={{
    size: "1.25rem",
    className: "inline-block align-middle",
    style: { verticalAlign: "middle" },
  }}
>
  {children}
</IconContext.Provider>

A prop `size` aceita strings, números ou ambos?

Aceita ambos, strings (por exemplo, "1.5rem") e números.
Ao usar um número, ele é mapeado para pixels.

Armadilha: Você pode misturar famílias de ícones preenchidas e baseadas em traços sem problemas visuais?

Não. Misturar estilos (por exemplo, Font Awesome sólido com Feather tracejado) parece inconsistente.
Mantenha uma família de ícones para um peso visual consistente, ou normalize cuidadosamente tamanhos e traços.

Quantas famílias de ícones o React Icons inclui e qual tem mais ícones?

React Icons inclui mais de 11 famílias de ícones em um único pacote.
Tabler Icons (prefixo Tb) tem o maior número com mais de 4.600 ícones.
Material Design (Md) segue com mais de 4.300 ícones.

Ícones do React

Buscar na documentação

Ícones do React