Why is the icon from the svg sprite not being inserted in a React project?

Question

HTML

Having a problem using svg sprites in react app

I'm trying to insert an icon from a sprite, but it fails (it doesn't show up). I insert through svg use.
There are no problems in pure html - there the icon from the sprite is inserted and displayed.
The problem occurs only in a project written in react.

Inline svg are inserted and displayed without problems, the problem is only with the sprite. What could be the problem and what is it connected with?

Answer 1

Because react doesn't have HTML/XML, but JSX. The use tag is not supported. You can do this:

const useTag = '<use xlink:href="/icon/icons-sprite.svg#burgers" />';
return (
    <svg dangerouslySetInnerHTML={{__html: useTag }} />
);

dangerouslySetInnerHTML renders as HTML, not JSX. But it's better to use ready-made libs for svg. For example here:
https://www.npmjs.com/package/react-svg