Jak dodać ikony do React: lucide-react, react-icons, inline SVG czy sprite'y, zmierzone rozmiary bundla, ustawianie rozmiaru z currentColor, dostępność i konfiguracja Next.js.
Zainstaluj pakiet ikon, taki jak lucide-react lub react-icons, i importuj każdą ikonę po nazwie, na przykład import { Camera } from "lucide-react". Nazwane importy podlegają tree-shakingowi, więc do bundla trafiają tylko używane ikony. Ustawiaj rozmiar ikon propsami lub 1em, koloruj je przez currentColor, a dekoracyjne ukrywaj za pomocą aria-hidden.
Szybki wybór
Ten poradnik dotyczy podłączania ikon w kodzie React. Jeśli chcesz wiedzieć, które darmowe zestawy ikon wybrać i jakie mają licencje, zobacz naszą listę najlepszych darmowych bibliotek ikon. Podane tu rozmiary pochodzą z naszych własnych buildów, z podanym narzędziem i ustawieniami.
W naszym teście oba były małe przy pojedynczym nazwanym imporcie: 874 bajty po gzip dla jednej ikony lucide-react i około 1.3 KB dla jednej ikony react-icons, ponieważ react-icons dodaje mały wspólny wrapper. Oba rosną tylko o kilkaset bajtów na każdą dodatkową ikonę.
Większość komponentów ikon React rysuje za pomocą currentColor, więc ustaw CSS color na ikonie lub jej rodzicu, na przykład klasą koloru tekstu. lucide-react i react-icons przyjmują też prop color.
Tylko wtedy, gdy ikona jest jedynym nośnikiem znaczenia. Wtedy nadaj jej role="img" i aria-label albo dodaj etykietę do przycisku, który ją zawiera. Ikony obok widocznego tekstu należy ukryć za pomocą aria-hidden="true".
Tak. Komponenty lucide-react i react-icons to bezstanowe SVG i renderują się na serwerze. "use client" potrzebujesz tylko w komponencie, który używa stanu lub obsługi zdarzeń.
Gdy te same ikony pojawiają się wiele razy lub na stronach, które nie są w React. Każde <use> to krótkie odwołanie do jednego pliku w pamięci podręcznej, zamiast powtarzania pełnych danych ścieżki w HTML.
Cztery sposoby na umieszczenie ikon w aplikacji React
Każda ikona to nazwany eksport. size, color i strokeWidth to propsy, a każdy inny prop jest przekazywany do svg.
Importuj ze ścieżki danej rodziny (fa, md, lu, fi i tak dalej). IconContext.Provider ustawia wartości domyślne dla każdej ikony w jego wnętrzu.
Wklej dane ścieżki raz i używaj ich jak każdego komponentu. width i height równe 1em sprawiają, że ikona dopasowuje się do rozmiaru tekstu.
Zbundlowaliśmy importy pojedynczych ikon za pomocą esbuild w trybie produkcyjnym i skompresowaliśmy wynik gzipem. Nazwane importy z obu pakietów pozostają małe; import przestrzeni nazw wciąga cały zestaw. Sam React nie jest wliczony.
Zmierzony rozmiar dodawany przez importy ikon (zminifikowane, potem gzip -9; bez React)
Zdefiniuj każdą ikonę raz jako <symbol>, a potem rysuj ją w dowolnym miejscu za pomocą <use>. Zmień kolor na elemencie otaczającym, a obie ikony się dostosują, ponieważ ścieżki używają currentColor.
Serwuj symbole jako /icons.svg i wskaż w każdej ikonie id z tego pliku. Przeglądarka pobiera plik i zapisuje go w pamięci podręcznej raz. Zewnętrzny sprite musi pochodzić z tego samego originu.
Ikony używające currentColor przejmują kolor tekstu rodzica, więc style hover i trybu ciemnego nie wymagają osobnego CSS dla ikon. Zmień wartość color i zobacz, jak obie ikony się dostosowują.
Ikona obok widocznego tekstu jest dekoracją: ukryj ją. Ikona, która jest jedyną zawartością przycisku, wymaga nazwy na przycisku.
Komponenty lucide-react i react-icons dobrze renderują się w Server Components, ponieważ to zwykłe SVG bez stanu. Tylko komponent obsługujący kliknięcie potrzebuje "use client".
Next.js już optymalizuje importy dla listy popularnych pakietów ikon, w tym lucide-react i react-icons. Dodaj tu każdy inny używany pakiet ikon, aby buildy deweloperskie pozostały szybkie.
Najpierw wybierasz zestaw? Zobacz
najlepsze darmowe biblioteki ikon
Zacznij za darmo · Bez karty kredytowej