SVG Icons don't render on iPhone (cross-browser)

[P-Oliomonte]

Hi team!

We encounter the following issue: We import svg files from "public" like this:

import MarkAsIncorrect from "@/public/icons/MarkAsIncorrect.svg";

and use them as elements in the jsx like this:

<MarkAsIncorrect />

It works well on desktop and multiple mobile devices. Only on iPhone the icons are not visible – not only in Safari but Chrome on iphone as well.

This is the Link to our branch.
And this is the Preview Link

Maybe anyone encountered the issue before and can help us.

Thank you very much in advance.

[eneben]

We solved it by defining the width and height in the svg directly with fixed px values. This means that it has to be hard-coded. This is a little less nice, but at least it works.