@edusites/bancos-brasil

@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

O navegador baixa só os bancos que aparecem na tela: cada banco é um arquivo próprio, carregado sob demanda. No servidor (Node, SSR) tudo resolve na hora.

Nuxt (recomendado: o módulo)

Uma linha no nuxt.config registra <SvgBanco> no app inteiro e faz o build levar só os bancos que o site usa:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@edusites/bancos-brasil/nuxt-module']
})

O módulo acha os bancos procurando os nomes entre aspas no código (nome="nubank", { banco: 'itau' }). Nome montado em tempo de execução não aparece no código: liste em incluir.

export default defineNuxtConfig({
  modules: ['@edusites/bancos-brasil/nuxt-module'],
  edusitesBancos: { incluir: ['cora', 'picpay'] }
})

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

Com SSR o SVG sai no HTML do servidor e o navegador reaproveita o que já está na tela (não baixa de novo nem pisca).

plugins/bancos.js:

import { instalarBancos } from '@edusites/bancos-brasil/nuxt'

export default defineNuxtPlugin((nuxtApp) => {
  instalarBancos(nuxtApp)
})

Funciona igual na tela, mas o build gera um arquivo por banco da lib (o visitante só baixa os usados; os demais o Nuxt deixa como prefetch).

Vite (Vue, React, Svelte...)

Para o build levar só os bancos usados, adicione o plugin:

// vite.config.js
import { edusitesBancosVite } from '@edusites/bancos-brasil/vite'

export default {
  plugins: [edusitesBancosVite({ incluir: ['cora'] })]
}

Vue 3

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

<SvgBanco nome="nubank" />
<SvgBanco nome="cora" formato="circulo" />

JavaScript puro

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

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

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

svgBanco devolve a string na hora quando o banco já está em memória (sempre no servidor) e, no navegador, uma Promise enquanto baixa o arquivo daquele banco. Com await funciona nos dois casos. Também existem svgBancoAsync (sempre Promise) e svgBancoSync (string ou null, nunca Promise).

@edusites/bancos-brasil/core não depende de Vue; a entrada principal também exporta o componente Vue.

React

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

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

  useEffect(() => {
    let ativo = true
    svgBancoAsync({ nome, formato, cor, fundo, tamanho }).then((s) => ativo && setSvg(s || ''))
    return () => (ativo = false)
  }, [nome, formato, cor, fundo, tamanho])

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

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

Svelte

<script>
  import { svgBancoAsync } from '@edusites/bancos-brasil/core'

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

  let svg = ''

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

{@html svg}

Parâmetros

Bancos Disponíveis

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