Could you use SVG with Image component? | Mantine | Page 1

shrewd solar Oct 1, 2023, 4:01 PM

#

// Header.tsx
import logo from "../images/logo.svg";
<Image src={logo} size={24} /> // This doesn't render
<img src={logo} /> // This renders

<svg>
<g
        fontFamily="Brandmark Sans 32 Color"
        fontSize="72"
        fontStyle="normal"
        fontWeight="400"
        textAnchor="middle"
    >
... rest of svg
</svg>

Did I do anything wrong with Image component?
What's the mantine / react way of doing it? with SVGR?

#

Could you use SVG with Image component?

proper zenith Oct 1, 2023, 4:14 PM

#

shrewd solar ```js // Header.tsx import logo from "../images/logo.svg"; <Image src={logo} siz...

Image component does not support size prop. Use h and w props instead. If you use version 6.x, set width and height instead.

shrewd solar Oct 2, 2023, 8:00 AM

#

Thank you, my IDE didn't show the warning for this issue that's why I thought the size prop could work with <Image> intuitively

#Could you use SVG with Image component?