Ikonografia

prfct używa Lucide — otwartego zestawu ponad 1500 spójnych ikon konturowych na siatce 24 px. Komponenty same dobierają rozmiar i kolor ikon; twoje zadanie to wybrać właściwą ikonę — albo nie wybrać żadnej.

import { SearchIcon } from "lucide-react"

const pairs = [
  { size: 14, text: "text-xs", label: "tekst 12px" },
  { size: 16, text: "text-sm", label: "tekst 14px" },
  { size: 18, text: "text-base", label: "tekst 16px" },
  { size: 20, text: "text-lg", label: "tekst 18px" },
  { size: 24, text: "text-2xl", label: "tekst 24px" },
]

export default function IconSizes() {
  return (
    <div className="flex flex-col gap-4">
      {pairs.map(({ size, text, label }) => (
        <div key={size} className="flex items-center gap-4">
          <span className="w-12 font-mono text-[0.6875rem] text-muted-foreground">
            {size}px
          </span>
          <span className={`flex items-center gap-2 ${text} text-foreground`}>
            <SearchIcon
              style={{ width: size, height: size }}
              aria-hidden="true"
            />
            Szukaj
          </span>
          <span className="font-mono text-[0.6875rem] text-muted-foreground">
            {label}
          </span>
        </div>
      ))}
    </div>
  )
}

Rozmiar#

Rozmiar ikony zależy od tekstu, któremu towarzyszy, a nie od stałej wartości. Kreska skaluje się razem z ikoną, więc ikona 16 px obok tekstu 14 px ma tę samą wagę wizualną co litery.

Jedynym wyjątkiem są małe i domyślne odznaki: ich ikony mają 12 px, prawie tyle co tekst, żeby mieściły się w pigułce o wysokości 18–20 px.

Wewnątrz komponentów prfct nie ustawiaj rozmiaru ikon samodzielnie. Przyciski, pozycje menu, pola i odznaki ustalają rozmiar ikon selektorami [&_svg]. W przyciskach, pozycjach menu i polach klasa size-* na ikonie nadpisuje ten wybór, więc dodawaj ją tylko wtedy, gdy świadomie wychodzisz poza skalę; odznaki ją ignorują.

// Correct — the button sizes and spaces the icon
<Button>
  <PlusIcon data-icon="inline-start" />
  New project
</Button>

Kolor#

Ikony dziedziczą currentColor. W menu i polach domyślnie mają kolor muted-foreground, a gdy element jest podświetlony, przechodzą na foreground — dzięki temu na pierwszym planie zawsze pozostaje etykieta. Ikony statusów używają stopnia 11 swojej skali.

Wytyczne#

• Łącz ikony z tekstem. Sama ikona bywa niejednoznaczna. Przycisków z samą ikoną używaj tylko do powszechnie zrozumiałych akcji (zamknij, szukaj, więcej) i zawsze dawaj im aria-label oraz podpowiedź.
• Jedna metafora na akcję. Dla tej samej akcji wszędzie używaj tej samej ikony: Trash2 zawsze oznacza usuwanie.
• Ikony dekoracyjne są ukryte. Ikony obok etykiety tekstowej pełnią funkcję dekoracyjną; Lucide domyślnie renderuje je z aria-hidden="true".
• Nie mieszaj rodzin ikon. Różne grubości kresek i style narożników wyglądają na przypadek. Jeśli potrzebujesz znaku marki, którego nie ma w Lucide, narysuj go na tej samej siatce 24 px z kreską 2 px.