Przekład danych w formacie SVG na Jsx
Bezpłatnie online Przekład danych w formacie SVG na Jsx narzędzie, nie wymaga instalacji
Informacje o konwerterze SVG na JSX
Przekształca surowy znacznik SVG w gotowy do wklejenia komponent React. Przepisuje atrybuty SVG na zgodne z React właściwości w camelCase (class na className, stroke-width na strokeWidth, xlink:href na xlinkHref i wiele innych), konwertuje wbudowane ciągi stylów na obiekty stylów React, samodzielnie zamyka elementy void i kształty SVG oraz usuwa domyślną przestrzeń nazw xmlns="http://www.w3.org/2000/svg".
Jak używać
1. Wklej swój znacznik SVG (musi zawierać <svg> i </svg>) do pola wprowadzania 2. Kliknij Prettify, aby automatycznie wciąć znacznik przed konwersją (opcjonalne) 3. Ustaw nazwę komponentu (domyślnie SvgComponent, tylko znaki alfanumeryczne i podkreślenie) 4. W zależności od potrzeb przełącz dyrektywę "use client" i/lub hook useMemo 5. Kliknij Convert, aby wygenerować komponent JSX i skopiuj go do schowka
Opcje wyjścia komponentu
Pole Nazwa komponentu kontroluje wyeksportowany identyfikator. Po zaznaczeniu pola "use client" wyjście jest poprzedzone dyrektywą "use client" w osobnej linii i eksportowane jako default bez props; w przeciwnym razie jest eksportowane jako nazwane const, które przyjmuje props i zwraca svg. Po włączeniu useMemo znacznik SVG jest otaczany przez useMemo(() => (...), []). Dane wejściowe muszą zawierać zarówno <svg, jak i </svg>, w przeciwnym razie konwersja zostanie odrzucona z błędem nieprawidłowego SVG.
▶Które atrybuty SVG są konwertowane automatycznie?
▶Co robi Prettify?
▶Dlaczego atrybut xmlns jest usuwany?
▶Czy mogę uzyskać komponent kliencki Next.js?
Jeśli ten tool był dla ciebie przydatny, pomyśl o tym, aby kupić mi kawę.
Kup mi kawę.