React use SVGR with svg in public folder

Question

Is there any way I can import an SVG file in my public folder as a React component like so :

import { ReactComponent as MySvg } from '/assets/svg/mysvg.svg';

const MyComponent = () => {
  return (
    <div>
      <MySvg />
    </div>
  );
};

export default MyComponent;

I know there are workarounds like using an img tag but I really need my SVG to be used as a React component...

Thanks in advance !

Answer 1

You can copy & paste the svg code in a js file like this:

const MySvg = () => (
    <svg viewBox=...>....</svg>
)

then, you can use it like this:

<MySvg />