@edusites/bancos-brasil

Biblioteca JavaScript para renderizar ícones SVG de bancos brasileiros com total customização.

Instalação

npm install @edusites/bancos-brasil

yarn add @edusites/bancos-brasil

pnpm add @edusites/bancos-brasil

Uso

JavaScript Puro

import { svgBanco } from '@edusites/bancos-brasil'

// Com preset (configuração padrão)
const svg = await svgBanco({ nome: 'nubank' })
document.getElementById('app').innerHTML = svg

// Customizado
const svg = await svgBanco({
  nome: 'cora',
  formato: 'circulo',
  cor: '#FFFFFF',
  fundo: '#FE3E6D',
  tamanho: 96
})

React

import { svgBanco } from '@edusites/bancos-brasil'
import { useEffect, useState } from 'react'

function BancoIcon({ nome, formato, cor, fundo, tamanho }) {
  const [svg, setSvg] = useState('')

  useEffect(() => {
    svgBanco({ nome, formato, cor, fundo, tamanho }).then(setSvg)
  }, [nome, formato, cor, fundo, tamanho])

  return <div dangerouslySetInnerHTML={{ __html: svg }} />
}

// Uso
export default function App() {
  return (
    <div>
      <BancoIcon nome="nubank" />
      <BancoIcon nome="cora" formato="circulo" />
      <BancoIcon nome="itau" cor="#FFFFFF" fundo="#EC7000" tamanho={96} />
    </div>
  )
}

Vue 3 / Nuxt 3

Crie o componente SvgBanco.vue:

<script setup>
import { svgBanco } from '@edusites/bancos-brasil'
import { ref, watchEffect } from 'vue'

const props = defineProps({
  nome: { type: String, required: true },
  formato: String,
  cor: String,
  fundo: String,
  tamanho: Number
})

const svg = ref('')

watchEffect(async () => {
  svg.value = await svgBanco({
    nome: props.nome,
    formato: props.formato,
    cor: props.cor,
    fundo: props.fundo,
    tamanho: props.tamanho
  })
})
</script>

<template>
  <div v-html="svg"></div>
</template>

Uso no template:

<template>
  <div>
    <SvgBanco nome="nubank" />
    <SvgBanco nome="cora" formato="circulo" />
    <SvgBanco nome="itau" cor="#FFFFFF" fundo="#EC7000" :tamanho="96" />
  </div>
</template>

Svelte

Crie o componente SvgBanco.svelte:

<script>
  import { svgBanco } from "@edusites/bancos-brasil";

  export let nome;
  export let formato = undefined;
  export let cor = undefined;
  export let fundo = undefined;
  export let tamanho = undefined;

  let svg = "";

  $: svgBanco({ nome, formato, cor, fundo, tamanho }).then((s) => (svg = s));
</script>

{@html svg}

Uso:

<SvgBanco nome="nubank" />
<SvgBanco nome="cora" formato="circulo" />
<SvgBanco nome="itau" cor="#FFFFFF" fundo="#EC7000" tamanho={96} />

Parâmetros

Propriedade	Tipo	Obrigatório	Padrão	Descrição
nome	string	✅ Sim	-	Nome do banco
formato	string	❌ Não	"quadrado"	"quadrado", "circulo" ou "sem"
cor	string	❌ Não	Preset	Cor do ícone (hex)
fundo	string	❌ Não	Preset	Cor de fundo (hex)
tamanho	number	❌ Não	64	Tamanho em pixels
className	string	❌ Não	-	Classe CSS

Bancos Disponíveis

Nome	Cor Ícone	Cor Fundo
bancodobrasil	#FFDD00	#003D7A
bradesco	#FFFFFF	#CC092F
btg	#FFFFFF	#001E62
c6	#FFFFFF	#121212
caixa	#FFFFFF	#0066A1
cora	#FFFFFF	#FE3E6D
digio	#FFFFFF	#00275C
infinitepay	#000000	#FFFFFF
inter	#FFFFFF	#FF7A00
itau	#FFFFFF	#EC7000
mercadopago	#0A0080	#00BCFF
neon	#01C4E0	#161C3E
nubank	#FFFFFF	#820AD1
pagbank	#000000	#42A936
pan	#414141	#FFFFFF
picpay	#000000	#FFFFFF
safra	#C3AC6C	#151D43
santander	#FFFFFF	#EC0000
sicoob	#B8D335	#003B43
xp	#000000	#FFFFFF

Formatos

• quadrado - Quadrado com bordas arredondadas (padrão)
• circulo - Circular
• sem - Sem fundo, apenas o ícone

Licença

MIT © Lecdt.com

---

Desenvolvido por @edusites na Lecdt.com