Łatwo konwertuj pliki SVG do JSX — Numio

Zamienia znacznik SVG w komponent funkcji React: SVGO optymalizuje SVG w przeglądarce, a następnie SVGR konwertuje go lokalnie w przeglądarce. Atrybuty to camelCased (szerokość obrysu do strokeWidth), rozmiary liczbowe stają się liczbami, a {...props} jest rozłożone na korzeniu <svg>.

Przekształcanie ikony wyeksportowanej z Figmy lub Illustratora w komponent React.

SVG

Optymalizacja SVGO jest włączona.

Wynik

JSX

Kiedy go używać

Przekształcanie ikony wyeksportowanej z Figmy lub Illustratora w komponent React.
Sprawdzanie, jak SVGR przepisze SVG przed dodaniem SVGR do potoku kompilacji.

Jak używać

Wklej znacznik SVG lub załaduj plik .svg; wejście, które jest nieprawidłowe SVG jest odrzucane z błędem.
Otwórz Ustawienia, aby wyłączyć optymalizację SVGO lub przełączyć wtyczki, takie jak usuwanie tytułu lub łączenie ścieżek; podgląd poniżej edytora porównuje oryginał i zoptymalizowany SVG.
Skopiuj komponent i zmień nazwę SvgComponent; przekaż className, szerokość lub wypełnienie jako podpory.

SVG

<!-- Generator: Adobe Illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Minus</title>
  <path fill="none" stroke="currentColor" stroke-width="2.000" stroke-linecap="round" d="M5.000 12.000 L19.000 12.000"/>
</svg>

Komponent reakcji (JSX)

import * as React from "react"
const SvgComponent = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <path
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeWidth={2}
      d="M5 12h14"
    />
  </svg>
)
export default SvgComponent

Szczegóły i ograniczenia

SVGO i SVGR działają lokalnie w przeglądarce. Twój znacznik SVG nie został przesłany na serwer konwersji.

Przy ustawieniach domyślnych komentarze, <title>, <desc> i metadane edytora są usuwane, a dane ścieżki są skracane (M5.000 12.000 L19.000 12.000 staje się M5 12h14). Wyłącz optymalizację, aby przekonwertować SVG w postaci wklejonej.

ciągi stylów stają się obiektami stylu, a klasa staje się className.

Cele wyjściowe Reaguj DOM; użyj SVG, aby React Native dla React-Native-SVG.

FAQ

Dlaczego korzeń zachowuje szerokość i wysokość?

usuwanie wymiarów jest wyłączone w ustawieniach SVGO, a SVGR używa opcji domyślnych, więc wymiary są zachowywane jako liczby (szerokość={24}). Zastąp je za pomocą właściwości, ponieważ po nich następuje {...props}.

Czy fill="currentColor" pozwoli mi ustawić kolor z CSS?

Tak. currentColor zostaje zachowane, więc ikona ma kolor CSS swojego rodzica. Zakodowane na stałe kolory wewnątrz ścieżek nie są zastępowane.

Dlaczego w moim komponencie brakuje <title>?

Opcja usuwania tytułu SVGO jest domyślnie włączona. Wyłącz tę opcję w Ustawieniach lub całkowicie wyłącz optymalizację, jeśli potrzebujesz <title> ze względu na dostępność.

Czy dostępne jest wyjście TypeScript?

Nie. Strona wyświetla komponent JavaScript bez adnotacji typu.

Specyfikacje i referencje

Dokumentacja SVGR