Przekład danych w formacie 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".

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

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.