Ícones

O problema: altura fixa igual para todos

Os ícones do Chuv Studio não têm as mesmas dimensões entre si — cada símbolo foi desenhado na proporção ideal para a sua forma. Aplicar height: 30px a todos os ícones faz com que aqueles com menor altura original no Figma apareçam visualmente maiores que os demais, quebrando a harmonia e o peso de linha uniforme.

/* ❌ ERRADO — cada ícone fica em uma escala diferente */
<img src={iconCalendar}  height={30} />   /* Calendar:  373px → 30px (escala 0.080) */
<img src={iconCelular}   height={30} />   /* Celular:   328px → 30px (escala 0.091) ← aparece maior */
<img src={iconFilmadora} height={30} />   /* Filmadora: 296px → 30px (escala 0.101) ← aparece ainda maior */

A solução: fator de escala único (scale factor)

Defina o tamanho desejado para um único ícone de referência, calcule o fator, e aplique o mesmo fator a todos os outros. Assim o peso de linha e as proporções relativas permanecem idênticos.

/* ✅ CORRETO — um único scale aplicado a todos */

const SCALE = 37 / 374.1;   /* referência: Calendar com 37px de largura */
                              /* SCALE ≈ 0.0989 */

/* Cada ícone recebe suas próprias dimensões calculadas: */
/* displayWidth  = figmaWidth  × SCALE                   */
/* displayHeight = figmaHeight × SCALE                   */

<img src={iconCalendar}  width={374.1 * SCALE} height={348.3 * SCALE} />  /* 37 × 35 px */
<img src={iconCelular}   width={219   * SCALE} height={328   * SCALE} />  /* 22 × 33 px ← mais estreito */
<img src={iconFilmadora} width={453   * SCALE} height={296   * SCALE} />  /* 45 × 30 px ← mais largo   */

Dimensões de referência — escala atual (9.9%)

Para usar em outro tamanho: calcule SCALE = larguraDesejada / figmaWidth usando qualquer ícone como referência, e aplique a todos.