lucide-react

O que é

Biblioteca de ícones SVG como componente React (<Search />, <Menu />...).

Por que essa

Escolhida na fase de "Sistema" (design tokens) em vez de @hugeicons/react — recomendação padrão, licença permissiva, tree-shakeable (só entra no bundle o ícone realmente importado) e é a mesma lib usada nos projetos de referência. Leitura de apoio: documentação oficial do lucide-react — por que ícones como componente tree-shakeable e com licença permissiva.

Versão

^1.34.0 (package.json).

Como importar

Nunca direto de lucide-react no componente — sempre pelo barrel curado em theme/icons.tsx:

// theme/icons.tsx — reexporta só o que já é usado em algum componente,
// nada especulativo; cresce conforme a necessidade real aparece.
export { Search, Menu, LogOut, /* ... */ } from "lucide-react";
export type { LucideIcon } from "lucide-react";

import { Search } from "@/theme/icons";

Por que o barrel

Sem ele, cada arquivo escolhe o ícone que "parece certo" na hora, e o mesmo conceito (ex.: "editar") acaba com 3 ícones diferentes espalhados pelo projeto. Com o barrel, dá pra ver de relance todo ícone em uso e reaproveitar o mesmo em vez de importar um novo parecido.

Exemplo real

Item de navegação tipado (shared/layout/navigation.ts):

import { LayoutDashboard, type LucideIcon } from "@/theme/icons";

export type NavItem = { href: string; label: string; icon: LucideIcon };

export const SIDEBAR_SECTIONS: NavSection[] = [
  { title: "Principal", items: [{ href: "/dashboard", label: "Início", icon: LayoutDashboard }] },
];