Konwerter SVG na React/JSX

Konwerter SVG na React/JSX MiniWebtool przekształca wklejony lub przesłany plik SVG w komponent React. Skonfiguruj typowane właściwości TypeScript, forwardRef, memoizację i obsługę tytułu; wygenerowany kod obejmuje konwersję atrybutów i stylów.

Potrzebujesz pomocy z narzędziem? Zapytaj AI

Gemini (kopiuj i otwórz)

W Gemini wklej skopiowane pytanie do czatu. Możesz je też skopiować poniżej.

Zobacz pytanie

Chcę zrozumieć, jak korzystać z narzędzia Konwerter SVG na React/JSX w MiniWebtool: https://miniwebtool.com/pl/konwerter-svg-na-react-jsx/. Do czego służy, jakie dane lub ustawienia są potrzebne oraz jak go używać i interpretować wynik? Pokaż jeden prosty przykład krok po kroku. Oprzyj wyjaśnienie na tej stronie i odpowiedz po polsku.

3 darmowe użycia dziennieBez rejestracjiNatychmiastowe wyniki

Konwerter SVG na React/JSXWypróbuj teraz — za darmo ▼

Źródło SVG

Wklej kompletny element <svg>. Serwer akceptuje do 220000 znaków.

Prześlij plik .svg

Przesłanie pliku uzupełnia edytor w celu podglądu, a następnie przesłany plik jest używany podczas konwersji.

Wejście <svg>

Normalizacja camelCase

React {...props}

Wyjście Komponent

Elementy 0

Atrybuty 0

ViewBox -

Nazwa komponentu

Użyj formatu PascalCase, na przykład AlertIcon, BrandMark lub LogoGlyph.

Ustawienia wyjściowe

Styl eksportu

Obsługa stylów inline

Właściwości TypeScript props Obsługa forwardRef Owiń w React.memo Dostępna właściwość title prop Oczyszczaj skrypty i procedury obsługi Użyj rozmiaru ikon 1em Dodaj {...props}

Embed Konwerter SVG na React/JSX Widget

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

W skrócie

Konwerter SVG na React/JSX zamienia wklejony kod SVG lub przesłany plik .svg w komponent React. Przepisuje atrybuty do postaci JSX i oferuje wyjście w TypeScript, forwardRef i React.memo.

Konwerter SVG na React/JSX: funkcje w skrócie
Funkcja	Co otrzymujesz	Przydatne dla
Wklejenie lub przesłanie	Wklejenie kodu SVG do edytora lub przesłanie pliku .svg w kodowaniu UTF-8.	Zamiana plików ikon i logo na komponenty
Konwersja atrybutów	Atrybuty SVG, takie jak stroke-width, fill-rule i clip-path, zmieniają się w strokeWidth, fillRule i clipPath, a class w className.	Uniknięcie ręcznej edycji każdego atrybutu
Obiekty stylów	Ciągi stylów inline zamieniane są na obiekty style w JSX z nazwami właściwości CSS w notacji camelCase.	SVG wyeksportowane z stylami inline
Opcje komponentu	Ustawienie nazwy komponentu, wybór eksportu domyślnego lub nazwanego oraz opcjonalne dodanie propsów TypeScript, forwardRef, React.memo i przekazywania propsów.	Biblioteki ikon w systemach projektowych i projekty TypeScript
Prop tytułu	Opcjonalna obsługa tytułu dodaje dostępny tytuł do SVG przez prop.	Znaczące ikony, które czytniki ekranu powinny zapowiadać
Oczyszczanie	Domyślnie włączone: usuwa znaczniki script, obsługę zdarzeń inline i linki javascript: z wygenerowanego kodu.	Sprawdzanie SVG z zewnętrznych źródeł

Jak używać

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

Co obsługuje konwerter

Czyszczenie atrybutów ReactPopularne atrybuty SVG, takie jak stroke-width, fill-rule i clip-path, są przepisywane jako strokeWidth, fillRule i clipPath.

Ergonomia komponentówOpcjonalne {...props}, forwardRef, React.memo, eksport domyślny, eksport nazwany oraz właściwości TypeScript props ułatwiają wdrożenie wyniku do bazy kodu React.

Bezpieczniejszy przegląd koduOczyszczanie domyślnie usuwa znaczniki skryptów, wbudowane procedury obsługi zdarzeń oraz linki javascript:, dzięki czemu wygenerowany JSX jest bezpieczniejszy do sprawdzenia przed użyciem.

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.

Cytuj ten materiał, stronę lub narzędzie w następujący sposób:

"Konwerter SVG na React/JSX" na https://MiniWebtool.com/pl/konwerter-svg-na-react-jsx/ z MiniWebtool, https://MiniWebtool.com/

przez zespół MiniWebtool. Zaktualizowano: 2026-05-22

Porozmawiaj ze swoją ulubioną AI