Konwerter SVG na React/JSX

Konwerter SVG na React/JSX przekształca surowe pliki SVG w komponenty React wielokrotnego użytku. Został stworzony dla programistów, którzy potrzebują czystszych komponentów ikon, znaków towarowych, ilustracji produktów i zasobów systemów projektowania (design systems) bez konieczności ręcznego poprawiania każdego atrybutu SVG. Wklej znacznik SVG lub prześlij plik .svg w kodowaniu UTF-8, wybierz potrzebne opcje React, a następnie skopiuj wygenerowany komponent do swojego projektu.

Jak używać

1. Wklej lub prześlij SVG. Wklej kompletny plik SVG do edytora lub prześlij plik .svg w kodowaniu UTF-8.
2. Nazwij komponent. Wprowadź nazwę komponentu React w formacie PascalCase, np. AlertIcon lub BrandMark.
3. Wybierz opcje React. Wybierz opcje TypeScript, forwardRef, React.memo, dostępność tytułu, konwersję stylów, oczyszczanie i rozwijanie właściwości (props).
4. Konwertuj na JSX. Kliknij Konwertuj na komponent React, aby wygenerować gotowy do skopiowania kod JSX.
5. Przejrzyj i skopiuj. Przejrzyj podsumowanie konwersji, ostrzeżenia i wygenerowany kod przed skopiowaniem go do swojego projektu React.

Co obsługuje konwerter

Wskazówki dotyczące lepszych komponentów SVG w React

Zachowaj oryginalny viewBox, kiedy tylko to możliwe, ponieważ kontroluje on sposób skalowania SVG. W przypadku systemów ikon, ustawienia width="1em" i height="1em" pozwalają ikonie dziedziczyć rozmiar tekstu, jednocześnie umożliwiając komponentom nadrzędnym nadpisywanie wymiarów za pomocą właściwości (props). Używaj opisowych nazw komponentów w formacie PascalCase, dbaj o dostępność dekoracyjnych plików SVG za pomocą aria-hidden, gdy jest to odpowiednie, i używaj właściwości title prop dla istotnych ikon, które przekazują ważne informacje.

FAQ

Co zmienia ten konwerter SVG na React?

Analizuje kod XML SVG i przepisuje atrybuty SVG na JSX przyjazny dla React, w tym className, atrybuty SVG w formacie camelCase, opcjonalne obiekty stylów, właściwości (props), forwardRef, dostępność tytułu oraz składnię eksportu.

Czy mogę przesłać plik SVG?

Tak. Możesz przesłać plik .svg w kodowaniu UTF-8 lub wkleić kod SVG. Przesłane pliki są odczytywane jako tekst i konwertowane na JSX po stronie serwera.

Czy konwerter oczyszcza kod SVG?

Oczyszczanie jest włączone domyślnie. Konwerter usuwa znaczniki skryptów, wbudowane procedury obsługi zdarzeń oraz linki javascript: dzięki czemu wygenerowany komponent jest bezpieczniejszy do sprawdzenia przed użyciem.

Dlaczego warto konwertować atrybuty stylów na obiekty?

React oczekuje, że właściwość style będzie obiektem podczas pisania JSX. Konwersja ciągów stylów na obiekty sprawia, że kod wynikowy kompiluje się bez błędów, a nazwy właściwości CSS zachowują format camelCase.

Jaki jest najlepszy format nazwy komponentu?

Użyj formatu PascalCase, takiego jak AlertIcon lub BrandMark. Konwerter usuwa nieprawidłowe znaki i zapewnia, że wynik zaczyna się od poprawnego identyfikatora komponentu React.