, поэтому я относительно новичок в файлах activJS и SVG.
Как я уже исследовал, все теги SVG теперь полностью поддерживаются реагированием, поэтому я хочу следующее:
class Example extends Component {
render() {
return(
<svg className="search__icon">
<use xlinkHref="../../public/img/sprite.svg#icon-paper-plane" />
</svg>
)
}
}
Мой лист спрайтов SVG выглядит следующим образом:
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1">
<defs>
<symbol id="icon-paper-plane" viewBox="0 0 20 20">
<title>paper-plane</title>
<path d="M18.64 2.634c-0.344 0.121-17.321 6.104-17.656 6.222-0.284 0.1-0.347 0.345-0.010 0.479 0.401 0.161 3.796 1.521 3.796 1.521v0l2.25 0.901c0 0 10.838-7.958 10.984-8.066 0.148-0.108 0.318 0.095 0.211 0.211s-7.871 8.513-7.871 8.513v0.002l-0.452 0.503 0.599 0.322c0 0 4.65 2.504 4.982 2.682 0.291 0.156 0.668 0.027 0.752-0.334 0.099-0.426 2.845-12.261 2.906-12.525 0.079-0.343-0.148-0.552-0.491-0.431zM7 17.162c0 0.246 0.139 0.315 0.331 0.141 0.251-0.229 2.85-2.561 2.85-2.561l-3.181-1.644v4.064z"></path>
</symbol>
</defs>
</svg>
У меня не установлено ни одного загрузчика SVG, но я до сих пор не понимаю, почему он не работает?Я использую приложение create-реакции?Может ли кто-нибудь просветить меня?Нужно ли преобразовывать svg в атрибуты JSX, что означает удаление двоеточий и использование обозначения camelToe?Должен ли я как-то импортировать svg в мой компонент?