How to use this API in React?

[Launchpad5682]

How can I use the response svg in React as the response returned is in HTML and React needs JSX. I tried few tricks but didn't able to use it.

[FlorianKoerner]

Version 5.x

• https://dicebear.com/guides/use-the-library-with-react
• https://dicebear.com/guides/use-the-library-with-react-native

Version 4.x

The safest way is to use it with dataUri option.

const avatar = createAvatar(style, {
  dataUri: true,
})

<img src={avatar} />

CodeSandbox example:
https://codesandbox.io/s/pensive-herschel-8ybqw?file=/src/App.js

---

Another solution without img element but with real SVG element can be achieved with the lib react-inlinesvg.

const avatar = createAvatar(style, {
  dataUri: true
});

return <Svg src={avatar} alt="avatar" />;

CodeSandbox example:
https://codesandbox.io/s/discussions-155-2-wz7lm?file=/src/App.js:198-363

---

But also dangerouslySetInnerHTML should not cause any problems, because at least the official avatar styles should not output dangerous code. But I wouldn't use dangerouslySetInnerHTML either.