Better Icon

Micro-componente da 8 righe: prende un'icona SVG e la mette dentro un cerchio colorato di 48×48. Serve a dare peso visivo alle icone nelle liste di feature, dove un SVG nudo si perde. Non ha "use client", quindi puoi usarlo tranquillamente dentro un server component.

File

components/BetterIcon.tsx

Uso base

import BetterIcon from "@/components/BetterIcon";

<BetterIcon>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor"
    className="w-6 h-6"
  >
    <path d="M11.983 1.907a.75.75 0 0 0-1.292-.657l-8.5 9.5A.75.75 0 0 0 2.75 12h6.572l-1.305 6.093a.75.75 0 0 0 1.292.657l8.5-9.5A.75.75 0 0 0 17.25 8h-6.572l1.305-6.093Z" />
  </svg>
</BetterIcon>

Props

• children: React.ReactNode — obbligatoria. Passa l'SVG dell'icona. Dimensione consigliata w-6 h-6: il wrapper è w-12 h-12, così resta metà di spazio attorno.

Personalizzare

• Colore: usa bg-primary/20 text-primary di DaisyUI, quindi segue il tema in config.colors.theme. Per allinearlo al look neobrutalista di ZeroToShip sostituisci con i token del tema:

<div
  className="w-12 h-12 inline-flex items-center justify-center"
  style={{
    background: "var(--mustard)",
    border: "var(--border-brutal)",
    borderRadius: "0.25rem",
    color: "var(--ink)",
  }}
>
  {children}
</div>

• Dimensione: cambia w-12 h-12. Se lo fai, ricordati di adeguare la classe dell'SVG che passi come children.
• Forma: rounded-full → rounded per un quadrato smussato, come nel resto del tema.

Nel repo attuale nessuna pagina lo importa: è un pezzo di libreria pronto all'uso, non un componente della landing.