Twórz typowane komponenty React z plików SVG

Zamień surowy kod SVG w wielokrotnego użytku ikony TSX i zachowaj spójność kolorów, rozmiarów oraz dostępności.

Wklejanie SVG bezpośrednio do kodu często prowadzi do niespójnych atrybutów i wartości zapisanych na stałe. Ten przewodnik pokazuje przejrzysty workflow dla ikon React + TypeScript.

1) Normalizuj wejście SVG

Przed konwersją wyczyść niepotrzebne grupy, metadane i style wbudowane.
Zachowaj pole widoku, aby skalowanie komponentów pozostało przewidywalne.
Zmień nazwy identyfikatorów i masek, aby uniknąć kolizji podczas renderowania wielu ikon na jednej stronie.

2) Wygeneruj komponent bezpieczny dla typu

Użyj rekwizytów TypeScript rozszerzających rekwizyty SVG, aby uzyskać pełną obsługę IntelliSense.
Domyślna szerokość/wysokość i zezwalaj na zastąpienia z użycia nadrzędnego.
Zamień stałe wypełnienia na currentColor, jeśli ikony powinny dziedziczyć kolor tekstu.

3) Zintegruj z systemem projektowym

Przechowuj ikony w przewidywalnym folderze i eksportuj z pojedynczego pliku beczkowego.
Zastosuj reguły lub testy lint, aby zablokować nieprawidłowe atrybuty SVG w CI.
Przykłady użycia dokumentów dla tokenów rozmiaru semantycznego i etykiet arii.

Więcej przewodników SVG

Konwertuj SVG na PNG z przezroczystym tłem

Przygotuj zasoby projektowe do eksportu dokumentów i materiałów marketingowych.

Zoptymalizuj SVG pod kątem wydajności w Internecie

Zmniejsz ładunek SVG przed wysyłką komponentów.

Najczęstsze pytania o SVG w React TypeScript

Czy komponenty ikon powinny używać stałego koloru czy bieżącego koloru?

W przypadku ikon systemu projektowania wartość currentColor jest zwykle najlepsza, ponieważ kolorem można sterować z poziomu tekstu nadrzędnego lub tokenów motywu.

Jak typować propsy ikon?

Użyj React.SVGProps<SVGSVGElement> jako bazy i dodawaj opcjonalne własne propsy tylko wtedy, gdy naprawdę są potrzebne.

Czy mogę zachować elastyczność etykiet dostępności?

Tak. Wyświetl rekwizyty tytułu/arii i domyślnie ukryj arię dla ikon dekoracyjnych.

Czy powinienem dokonać optymalizacji przed konwersją React?

Tak. Optymalizacja najpierw redukuje hałas i pozwala uniknąć przenoszenia niepotrzebnych atrybutów do plików TSX.

Narzędzia używane w tym procesie pracy

Oczyść, zoptymalizuj, a następnie wygeneruj dane wyjściowe TSX dla ikon gotowych do produkcji.