@edusites/bancos-brasil 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edusites/bancos-brasil",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Biblioteca JavaScript para renderizar ícones SVG de bancos brasileiros",
   "author": {
     "name": "Eduardo Sites",

package/src/core.js

@@ -82,15 +82,34 @@ function criarFundo(formato, tamanho, corFundo) {
   return ''
 }
 
-function aplicarCor(conteudoSVG, cor) {
-  return conteudoSVG.replace(/fill="[^"]*"/g, `fill="${cor}"`)
+function extrairConteudo(svgCompleto) {
+  // Extrai só o conteúdo interno do SVG (paths, circles, etc)
+  const match = svgCompleto.match(/<svg[^>]*>([\s\S]*)<\/svg>/)
+  return match ? match[1].trim() : ''
 }
 
-function centralizarIcone(conteudoSVG, tamanhoOriginal, tamanhoFinal, padding = 0.2) {
-  const escala = 1 - padding
-  const offset = (tamanhoFinal * padding) / 2
+function extrairViewBox(svgCompleto) {
+  // Extrai o viewBox original
+  const match = svgCompleto.match(/viewBox=["']([^"']+)["']/)
+  return match ? match[1] : '0 0 108 108'
+}
 
-  return `<g transform="translate(${offset}, ${offset}) scale(${(escala * tamanhoFinal) / tamanhoOriginal})">${conteudoSVG}</g>`
+function aplicarCor(conteudo, cor) {
+  // Aplica a cor a todos os elementos gráficos
+  const elementos = ['path', 'circle', 'rect', 'polygon', 'ellipse', 'line', 'polyline']
+  let resultado = conteudo
+
+  elementos.forEach((elemento) => {
+    // Regex para encontrar cada elemento e seus atributos
+    const regex = new RegExp(`<${elemento}([^>]*)(\\/?>)`, 'g')
+    resultado = resultado.replace(regex, (match, attrs, fechamento) => {
+      // Remove fill existente e adiciona o novo
+      const attrsLimpos = attrs.replace(/\s*fill="[^"]*"/g, '')
+      return `<${elemento}${attrsLimpos} fill="${cor}"${fechamento}`
+    })
+  })
+
+  return resultado
 }
 
 export function svgBanco(options) {
@@ -112,16 +131,24 @@ export function svgBanco(options) {
     tamanho: tamanho || preset.tamanho
   }
 
-  const iconeOriginal = obterIcone(nomeNormalizado)
-  if (!iconeOriginal) return null
+  const svgOriginal = obterIcone(nomeNormalizado)
+  if (!svgOriginal) return null
+
+  const viewBoxOriginal = extrairViewBox(svgOriginal)
+  const conteudoOriginal = extrairConteudo(svgOriginal)
+  const conteudoColorido = aplicarCor(conteudoOriginal, config.cor)
 
-  let conteudoIcone = aplicarCor(iconeOriginal, config.cor)
-  conteudoIcone = centralizarIcone(conteudoIcone, 108, config.tamanho)
+  // Calcula padding e escala para centralizar o ícone
+  const padding = config.tamanho * 0.15
+  const tamanhoIcone = config.tamanho - padding * 2
+  const [, , vbWidth, vbHeight] = viewBoxOriginal.split(' ').map(Number)
+  const escala = tamanhoIcone / Math.max(vbWidth, vbHeight)
 
   const elementoFundo = config.formato !== 'sem' ? criarFundo(config.formato, config.tamanho, config.fundo) : ''
 
   const classAttr = className ? ` class="${className}"` : ''
-  return `<svg width="${config.tamanho}" height="${config.tamanho}" viewBox="0 0 ${config.tamanho} ${config.tamanho}" fill="none" xmlns="http://www.w3.org/2000/svg"${classAttr}>${elementoFundo}${conteudoIcone}</svg>`
+
+  return `<svg width="${config.tamanho}" height="${config.tamanho}" viewBox="0 0 ${config.tamanho} ${config.tamanho}" fill="none" xmlns="http://www.w3.org/2000/svg"${classAttr}>${elementoFundo}<g transform="translate(${padding}, ${padding}) scale(${escala})">${conteudoColorido}</g></svg>`
 }
 
 export function listarBancos() {