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

Question

[mimocrocodile]

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

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

Инлайново svg вставляются и отображаются без проблем, проблема только со спрайтом. В чём может быть проблема и с чем это связано?

Comments

[Maxim Kirshin]

попробуй лучше импортировать иконку и вместо href={importedIcon}. Если у тебя не настроен лоадер для svg - настрой

Answer 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