Więc zwykle, aby dołączyć większość moich ikon SVG, które wymagają prostej stylizacji, robię:
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
Teraz gram z ReactJS jak późno oceniając go jako ewentualny składnik mojego nowego frontonu stosie rozwoju jednak zauważyłem, że w swoim liście obsługiwanych tagów / atrybutów, ani use
czy xlink:href
są obsługiwane.
Czy można używać sprite'ów svg i ładować je w ten sposób w ReactJS?
<use xlinkHref="/svg/svg-sprite#my-icon" />
.xlink:href
jest przestarzały, teraz powinien po prostu używaćhref
- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:hrefxlink:href
więc nadal musimy go używać. Rzeczywiste aplikacje internetowe muszą albo używać wspólnego mianownika funkcji przeglądarki, albo implementować określone obejścia / wypełnienia.Property 'xlink' does not exist on type 'SVGProps<SVGImageElement>
Odpowiedzi:
Aktualizacja z września 2018 r . : to rozwiązanie jest przestarzałe, zamiast tego przeczytaj odpowiedź Jona .
-
React nie obsługuje wszystkie znaczniki SVG jak mówisz, jest lista obsługiwanych tagów tutaj . Pracują nad szerszym wsparciem, np. W tym zgłoszeniu .
Typowym obejściem jest wstawienie HTML zamiast nieobsługiwanych tagów, np .:
źródło
dangerouslySetInnerHTML
. Możesz użyć,xlinkHref
jak wspomniano poniżej.MDN twierdzi, że
xlink:href
jest to przestarzałe na korzyśćhref
. Powinno być możliwehref
bezpośrednie użycie atrybutu. Poniższy przykład obejmuje obie wersje.Począwszy od React 0.14 ,
xlink:href
jest dostępny za pośrednictwem React jako właściwośćxlinkHref
. Jest wymieniane jako jedno z „znaczących ulepszeń” w informacjach o wydaniu 0.14.Aktualizacja 2018-06-09: Dodano informacje o atrybutach
href
vsxlink:href
i zaktualizowano przykład, aby uwzględnić oba. Dzięki @devuxerAktualizacja 3 : W chwili pisania tego tekstu, właściwości SVG w React master można znaleźć tutaj .
Aktualizacja 2 : Wygląda na to, że wszystkie atrybuty svg powinny być teraz dostępne za pośrednictwem reakcji (patrz scalony atrybut svg PR ).
Aktualizacja 1 : Możesz mieć oko na problem związany z SVG na GitHub, aby uzyskać dodatkowe wsparcie dla SVG. Istnieją postępy w pracach.Próbny:
źródło
xlink:href
został wycofany, a zaleceniem jest używaniehref
bez przedrostka przestrzeni nazw. (Pamiętaj jednak, że jeśli używasz TypeScript, pisanie nie zostało jeszcze zaktualizowane, aby to odzwierciedlić.)Jeśli napotkasz
xlink:href
, to można dostać równowartość w ReactJS poprzez usunięcie jelita grubego i camelCasing dodatkowy tekst:xlinkHref
.Prawdopodobnie w końcu będziesz używać innych znaczników przestrzeni nazw w SVG, takich jak
xml:space
itp. Ta sama reguła dotyczy ich (tj.xml:space
Staje sięxmlSpace
).źródło
Jak już powiedziano w odpowiedzi Jona Surrella, tagi użycia są teraz obsługiwane. Jeśli nie używasz JSX, możesz to zaimplementować w następujący sposób:
źródło
Stworzyłem małego pomocnika, który działa wokół tego problemu: https://www.npmjs.com/package/react-svg-use
najpierw
npm i react-svg-use -S
po prostua to wygeneruje następujący znacznik
źródło
Pliki SVG można importować i używać bezpośrednio jako komponent Reacta w kodzie React.
źródło