O tym narzędziu
Narzędzie SVG na komponent JSX konwertuje surowe znaczniki SVG w czysty komponent React, tak jak robi to SVGR, ale w całości w Twojej przeglądarce, bez przesyłania czegokolwiek. Wklej ikonę wyeksportowaną z narzędzia projektowego i otrzymaj komponent, który możesz zaimportować i stylizować. Parsuje SVG za pomocą DOMParser i zgłasza jasny błąd, jeśli znaczniki są nieprawidłowe.
Każdy atrybut SVG z myślnikiem lub przestrzenią nazw jest zamieniany na camelCase do swojej nazwy React — stroke-width na strokeWidth, fill-rule na fillRule, clip-path na clipPath, stop-color na stopColor, xlink:href na xlinkHref, xmlns:xlink na xmlnsXlink — podczas gdy atrybuty data-* i aria-* pozostają bez zmian. Łańcuchy style inline stają się obiektami style, puste elementy, takie jak path i circle, są samozamykane, a propsy są rozpraszane na korzeń <svg {...props}>, więc komponent pozostaje konfigurowalny. Opcjonalne przełączniki pozwalają zastąpić zakodowane na stałe wartości fill i stroke wartością currentColor (aby ikona dziedziczyła kolor tekstu), usunąć width i height, aby skalowała się do swojego kontenera, oraz opakować komponent w forwardRef, aby udostępnić bazowy węzeł <svg>.
Wybierz wyjście JavaScript lub TypeScript: wariant TypeScript typuje propsy jako React.SVGProps<SVGSVGElement>, a przy włączonym forwardRef używa forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. Komponent jest emitowany jako eksportowana funkcja strzałkowa (export const Icon = (props) => (...)), z wybraną przez Ciebie nazwą i wcięciem, gotowa do wklejenia do modułu ikon.