использование svg в качестве компонента реакции

Question

я пытаюсь использовать SVG с реакцией, но я не могу попробовать какое-то решение, в результате я не нашел, почему я получаю эту ошибку:

InvalidCharacterError
Failed to execute 'createElement' on 'Document': The tag name provided ('<svg>
<g transform="translate(0.000000,227.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<

если есть кто-нибудь, кто может мне помочь, я буду очень благодарен. пример кода вcodeandbox: https://codesandbox.io/s/svg-in-react-r3g6l?file= / index. js

Answer 1

Это то, что я обычно делаю:

Посетите https://react-svgr.com/playground/ и вставьте свой SVG, и он преобразует SVG в компонент React. Он позволяет передавать атрибуты SVG в качестве реквизита.

Вы можете проверить его исходную библиотеку - svgr для других целей.

Answer 2

«В рамках функций, добавленных в новую версию create-react-app (v2), теперь мы можем импортировать SVG как компоненты React».

Дополнительные параметры см. В этой статье: using -svg-icons-components-in-react

* Изменить: чтобы изменить цвет svg, используйте свойство 'fill' в CSS. Вы можете добавить идентификатор или класс в свой svg, чтобы выбрать его.

fill: red;

Answer 3

вы должны использовать тег img

import Logo from "./Logo.svg
<img src={Logo} alt="Logo" />