React svg from public folder

Question

I'm trying to import the svg from the public folder.

How can I do that using import?

I've tried:

import Avatar_1 from './public/avatar_1.svg';

but I'm still getting "Module not found: Can't resolve './public/avatar_1.svg'"

Is there a way to use process.env.PUBLIC_URL?

Answer 1

I think it's not possible to access the public folder from src, so I did the following:

import { ReactComponent as Avatar1 } from './assets/avatar_1.svg';

and it worked.

How to use it:

<Avatar1 />

Please note that the ReactComponent as part of the import is mandatory, and that your new component name, like Avatar1, should always start with a capital letter. Otherwise react won't recognize this as a react component.

Answer 2

I don't know why you want to import it this way,

You can use it inside <img /> tag like this:

export default function MyComponent() {
   return (
      <div>
         <img src='/logo.svg' width={100} height={100} />
      </div>
   );
}