@mimocrocodile

Почему не вставляется иконка из svg спрайта в проекте на React?

Возникла проблема с использованием svg спрайтов в реакт-приложении

Я пытаюсь вставить иконку из спрайта, но это не удаётся (она не отображается). Вставляю через svg use.
В чистом html проблем нет - там иконка из спрайта вставляется и отображается.
Проблема возникает только в проекте написанном на реакте.

Инлайново svg вставляются и отображаются без проблем, проблема только со спрайтом. В чём может быть проблема и с чем это связано?
5f58f36ce4ce2543562034.png
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ответы на вопрос 1
@moody_good
Потому что в react не HTML/XML, а JSX. Тэг use не поддерживается. Можешь сделать так:
const useTag = '<use xlink:href="/icon/icons-sprite.svg#burgers" />';
return (
    <svg dangerouslySetInnerHTML={{__html: useTag }} />
);

dangerouslySetInnerHTML рендерит как HTML, а не JSX. Но лучше юзай готовые либы для svg. Например вот:
https://www.npmjs.com/package/react-svg
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы