Detalle — like button e ícono Subascoin más pequeños que Concorde

17 jul 2026

Producción

Concorde

Qué está mal

El like button (♡) de la cabecera es más pequeño: en Producción usa like-button--md con el SVG a 14×14.

El ícono de Subascoin del Precio Base se ve pequeño y comprimido: el SVG usa viewBox con margen negativo (-6 -12 48 56).

Cómo se corrige

Usar el tamaño grande del like (plike--lg, 40×40) con el corazón a ~21×21.

Ajustar el viewBox del ícono al contenido real (0 0 36 38) y dar width/height fijos, sin margen negativo.

Código producción

// PROD — like chico (md, svg 14) + subascoin con viewBox negativo
<button className="like-button like-button--md">
  <svg width="14" height="14" viewBox="0 0 24 24">♡</svg>
</button>

<div className="… size-10 …">
  <svg className="size-7" viewBox="-6 -12 48 56" overflow="visible">
    {/* margen negativo → ícono chico y comprimido */}
  </svg>
</div>

Código Concorde

ver código Concorde ver handoff

// Concorde — like grande (lg, 40×40) + subascoin con viewBox ajustado
<button className="plike plike--lg" style={{ width: 40, height: 40 }}>
  <svg width="21" height="21" viewBox="0 0 24 24">♡</svg>
</button>

<span className="priceicon">
  <svg width="36" height="38" viewBox="0 0 36 38">
    {/* tamaño real, sin margen negativo → ícono a escala */}
  </svg>
</span>