react-bancos

Ícones de bancos, fintechs, cartões, carteiras digitais e bandeiras de pagamento do Brasil como componentes React.
Fiéis às marcas, padronizados, tipados e com metadados — nome, código COMPE (quando aplicável) e cor de cada instituição.

🔎 Veja todos os ícones ao vivo — busque por nome ou código, ajuste tamanho e raio, e copie o import com um clique.

--- Todo produto brasileiro que lida com dinheiro esbarra no mesmo problema: mostrar **de qual banco, cartão ou carteira** é aquela conta, chave Pix, boleto ou compra. Este pacote resolve isso de uma vez — um componente por instituição ou marca, todos no mesmo padrão visual (quadrado, fundo na cor da marca, logo oficial centralizado com área de respiro consistente), prontos para listas de contas, extratos, seletores de instituição, checkouts e telas de Pix. ## Instalação ```bash npm install react-bancos # ou: pnpm add react-bancos / yarn add react-bancos ``` ## Uso ```tsx import { Nubank, Itau, BancoDoBrasil } from "react-bancos"; // 48px, cantos retos // 32px, cantos arredondados ``` Veio só o **código do banco** da sua API? Busque pelo COMPE, nome ou slug e renderize o ícone: ```tsx import { banks, getBankByCompe, getBankByName } from "react-bancos"; getBankByCompe(260); // aceita 260, "260" ou "77" (completa os zeros) getBankByName("itau"); // ignora acentos/caixa → { slug: "itau", name: "Itaú Unibanco", ... } const banco = banks.find((b) => b.compe === "260"); {banco && } ``` > `getBank(slug | compe)` continua existindo, mas está **deprecated** — prefira as buscas > específicas acima (que também existem em [`react-bancos/data`](#em-node-apis-e-backends-sem-react), sem React). Listar todos (ex.: seletor de instituição): ```tsx import { banks } from "react-bancos"; {banks.map(({ slug, name, Icon }) => ( ))} ``` ### Props Todos os componentes aceitam qualquer prop de `