SVG na React
Konwertuj SVG na React, JSX lub TSX
Zamień pliki SVG w znaczniki JSX, gotowy do zaimportowania komponent React w TypeScript lub JavaScript lub moduł eksportujący SVG jako ciąg znaków. Konwerter naprawia atrybuty JSX, konwertuje style wbudowane, zachowuje viewBox i obsługuje pobieranie wsadowe.
Edytowanie ustawień domyślnych dla nowych plików
Podgląd
Brak podglądu. Dodaj i wybierz pliki, aby zobaczyć wyniki.
Nie ma jeszcze plików. Upuść pliki powyżej lub kliknij WYBIERZ PLIKI.
Czym jest SVG?
SVG (Scalable Vector Graphics) to oparty na XML format obrazu wektorowego. Zamiast pikseli SVG matematycznie opisuje kształty, ścieżki, wypełnienia i obrysy, dzięki czemu może być renderowany w dowolnym rozmiarze bez utraty jakości.
SVG to standardowy format wektorowy dla internetu. Wszystkie nowoczesne przeglądarki obsługują go natywnie; można go stylizować za pomocą CSS oraz animować przez JavaScript lub SMIL. Zwykle jest kompaktowy dla logo, ikon i ilustracji, jednak złożone pliki SVG mogą być duże.
Kiedy konwertować SVG na React
Bundlery nie są zgodne co do tego, co daje import pliku .svg: wstawione znaczniki, adres URL albo zupełnie nic, dopóki nie dołożysz odpowiedniego loadera. Komponent trzymany w repozytorium obok reszty kodu omija ten problem. Ikona staje się zwykłym JSX, który przechodzi kontrolę typów, poddaje się tree shakingowi i przyjmuje propsy jak każdy inny komponent. Konwersja załatwia też to, czego wymaga JSX, a czego surowy SVG nie ma: stroke-width staje się strokeWidth, class staje się className, xlink:href staje się xlinkHref, a tekstowy atrybut style zamienia się w obiekt. Włącz opcję Użyj currentColor, a każde wypełnienie i każdy obrys odziedziczy właściwość color z CSS, więc jeden komponent obsłuży każdy kolor, w jakim go użyjesz.
Jak konwertować SVG na React online
- 1
Przeciągnij pliki SVG albo kliknij WYBIERZ PLIKI, aby dodać je do kolejki. Do 40 naraz.
- 2
Wybierz JSX, React Component albo Ciąg znaków SVG, a potem ustaw nazwę komponentu, język i to, czy użyć currentColor. Wygenerowany kod odświeża się, gdy zmieniasz opcje.
- 3
Skopiuj kod z podglądu albo kliknij ZAPISZ WSZYSTKO, aby pobrać po jednym pliku na każdy SVG, spakowane w ZIP, gdy w kolejce jest więcej niż jeden.
Prywatność: Twoje pliki nie opuszczają przeglądarki
Konwersja przebiega lokalnie w przeglądarce przy użyciu JavaScript i WebAssembly. Nie ma przesyłania plików ani konwersji po stronie serwera, więc dodane pliki pozostają na Twoim urządzeniu.
Przetwarzanie lokalne pomaga chronić poufne logo, dokumenty wewnętrzne i niepublikowane grafiki klientów. Strony i kod konwersji są zapisywane w pamięci podręcznej w miarę ich używania, więc narzędzia, które już otworzyłeś, mogą nadal działać bez połączenia sieciowego.
Najczęściej zadawane pytania
Czym różnią się te trzy wyniki?
JSX daje Ci same znaczniki svg do wklejenia w komponencie, który już masz. React Component daje kompletny moduł, wraz z importami i eksportem, gotowy do zapisania jako HomeIcon.tsx lub HomeIcon.jsx. Ciąg znaków SVG (TypeScript) to moduł .ts eksportujący znaczniki jako zwykły ciąg znaków, do wstrzyknięcia w HTML, w szablon e-maila albo w cokolwiek, co nie jest Reactem.
Czy komponent przyjmuje propsy takie jak className i onClick?
Tak, dopóki opcja Rozkładanie propsów jest włączona. Komponent przyjmuje React.SVGProps<SVGSVGElement> i rozkłada je na głównym elemencie svg za atrybutami z pliku, więc className, style, onClick, width i aria-label działają i nadpisują to, co było w pliku. Włącz dodatkowo forwardRef, a ref dotrze do samego elementu svg.
Co zmienia opcja Użyj currentColor?
Każde wypełnienie i każdy obrys, który podaje kolor, zostaje zastąpiony przez currentColor, więc grafika maluje się kolorem, do jakiego rozwija się właściwość color z CSS, a przekazanie do komponentu color="red" działa. fill="none" pozostaje nietknięte i nadal znaczy „nie maluj”. Opcja jest domyślnie wyłączona, bo wielokolorowa ilustracja po jej włączeniu spłaszcza się do jednego koloru.