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 use a loader in webpack, like this:

{
    test: /\.(svg)$/i, 
    loader: 'file-loader',
    options: {
      name: '/public/assets/svg/[name].[ext]'
    }
}

then, you can import your svg like this:

import MySvg from '/assets/svg/mysvg.svg';

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