0

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 !

Louis Lecouturier
  • 318
  • 3
  • 11

1 Answers1

0

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 />
Arshazar
  • 13
  • 1
  • 4
  • Thank you ! what if I have subfolders in my SVG folder ? – Louis Lecouturier Aug 12 '22 at 15:43
  • @LouisLecouturier options: { publicPath: 'assets', }, – Arshazar Aug 12 '22 at 15:50
  • it doesn't seem to work... my imports are not being changed when the app is running `ModuleNotFoundError: Module not found: Error: Can't resolve '/assets/svg/icons/sellers/stats/star.svg' in '/Users/louislecouturier/Documents/Resply/src/resply/libs/ui-kit/common/src/lib/Common/Misc/Data/Rate` – Louis Lecouturier Aug 12 '22 at 15:52
  • @LouisLecouturier I changed the answer with another method, check it out... I hope it works for you – Arshazar Aug 12 '22 at 16:31