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.

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.

Wewnątrz komponentów prfct nigdy nie ustawiaj rozmiaru ikon samodzielnie. Przyciski, pozycje menu, pola i odznaki ustalają rozmiar ikon selektorami [&_svg]; dodanie size-4 tylko walczy z systemem.

// 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.