SVG rendering issue "InvalidCharacterError: Failed to execute 'createElement' on 'Document'"

[Tombre]

Bug Report

Describe the bug

When importing svg elements into docz MDX files, rendering those svgs returns an error like so:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTE2LjE3MiA5bC02LjA3MS02LjA3MSAxLjQxNC0xLjQxNEwyMCAxMGwtLjcwNy43MDctNy43NzggNy43NzgtMS40MTQtMS40MTRMMTYuMTcyIDExSDBWOXoiLz48L3N2Zz4=') is not a valid name.

Just a note: I am unsure if it's my setup is wrong, but from reading other issues here I assuming you can import SVG's into considering svgr is included in the core?

To Reproduce

I have built a small sandbox to reproduce the issue:
https://github.com/Tombre/docz-svg-rendering

run yarn docz:dev

Expected behavior

Importing an svg into the mdx file should render it like a regular react component.

Environment

Docz Version: ^2.0.0-rc.57
Node: v10.16.3
NVM: 6.9.0

Additional context/Screenshots

Here is a screen shot of the result

[juanpablocs]

you should use a gatsby plugin

npm add gatsby-plugin-react-svg

create file gatsby-config.js

add

module.exports = {
    plugins: ['gatsby-plugin-react-svg']
}

This worked for me.

[rakannimer]

Thanks @juanpablocs for providing the solution !

@Tombre, I opened a PR (Tombre/docz-svg-rendering#1) to your repro and tried it and it's working as expected 👍

[Tombre]

This solved it thanks!