Konwerter SVG na JSX

Czym jest Konwerter SVG na JSX?

Konwerter SVG na JSX to darmowe narzędzie w przeglądarce, które zamienia zwykły znacznik SVG na prawidłowy React JSX, który możesz wkleić bezpośrednio do komponentu. React oczekuje atrybutów DOM w camelCase (strokeWidth, clipPath, fillRule), używa className zamiast class i wymaga atrybutu style jako obiektu właściwości w camelCase, a nie łańcucha — to narzędzie poprawia to wszystko automatycznie. Programiści front-end i projektanci używają go przy eksportowaniu ikon z Figmy, Illustratora lub zestawu ikon. Włącz opcjonalne czyszczenie, aby usunąć komentarze, metadane edytora i deklaracje XML, i wybierz, czy wyjściem jest wbudowany JSX, czy komponent funkcyjny, memo() lub forwardRef otypowany za pomocą React.SVGProps.

Jak używać Konwerter SVG na JSX

1. Wklej swój znacznik SVG do pola wejściowego lub upuść plik .svg na strefę upuszczania.
2. Odczytaj przekonwertowany JSX w polu wyjściowym — atrybuty są w camelCase, class staje się className, wbudowany style staje się obiektem style, a puste tagi samozamykają się.
3. Otwórz Ustawienia i wybierz Wyjście komponentu: wbudowany JSX, komponent funkcyjny, komponent memo() lub komponent forwardRef.
4. Ustaw pole Nazwa komponentu, aby określić nazwę używaną w opakowaniu (na przykład MyIcon).
5. Włącz Propsy TypeScript, aby otypować komponent za pomocą React.SVGProps, lub włącz Wyczyść SVG, aby najpierw usunąć komentarze i metadane edytora.
6. Kliknij Kopiuj, aby skopiować JSX, a następnie wklej go do swojego projektu React lub Next.js.

Przykłady

<svg viewBox="0 0 24 24"><path stroke-width="2" style="fill:none;stroke-linecap:round" d="M4 12h16"/></svg>

<svg viewBox="0 0 24 24"><path strokeWidth="2" style={{ fill: "none", strokeLinecap: "round" }} d="M4 12h16" /></svg>

<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>

export const MyIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function MyIcon(props, ref) {
  return (
    <svg viewBox="0 0 24 24" ref={ref} {...props}><circle cx="12" cy="12" r="10" /></svg>
  );
});

Najczęściej zadawane pytania

Co konwerter zmienia w moim SVG?

Zmienia nazwy atrybutów z myślnikiem i z przestrzenią nazw na formę camelCase Reacta (stroke-width na strokeWidth, xlink:href na xlinkHref), przekształca class w className, przepisuje wbudowany łańcuch style na obiekt style JSX z kluczami w camelCase i samozamyka puste elementy, takie jak path i rect, aby były prawidłowym JSX.

Jak działają opcje wyjścia komponentu?

Wybierz wbudowany JSX, aby umieścić znacznik w dowolnym miejscu, lub opakuj go jako komponent funkcyjny, memo() lub forwardRef z podaną Nazwą komponentu. Komponent forwardRef otrzymuje ref dołączony do głównego svg. Włącz Propsy TypeScript, aby otypować dowolne opakowanie za pomocą React.SVGProps i rozłożyć {...props}.

Czy konwertuje style wbudowane?

Tak. Atrybut style="fill:red;stroke-width:2" jest przepisywany na obiekt style JSX, taki jak style={{ fill: "red", strokeWidth: "2" }}, z nazwami właściwości w camelCase i wartościami jako łańcuchy. Niestandardowe właściwości CSS (--var) są zachowywane jako klucze łańcuchowe.

Co robi czyszczenie w stylu SVGO?

Gdy Wyczyść SVG jest włączone, narzędzie usuwa deklaracje XML, DOCTYPE, komentarze, <metadata>, przestrzenie nazw edytora, takie jak inkscape: i sodipodi:, oraz atrybut version svg, a następnie zwija białe znaki — wszystko przed uruchomieniem konwersji na JSX.

Czy mój SVG jest gdzieś przesyłany?

Nie. Upuszczenie pliku lub wklejenie znacznika uruchamia czystą transformację łańcucha znaków w całości w Twojej przeglądarce, więc Twój SVG nigdy nie jest wysyłany na serwer, a narzędzie działa offline.