Custom Icon Access/Reading

Question

I'm using a Polyline from google API to create a route on the map. I know that I can only use .svg formatted image for my icon. I created a custom icon that is saved as .svg and I put it into our public folder. When I tried to access it as public/img.svg or /img.svg it's not working.
Here is googles example https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-arrow
I'm changing the path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW to my custom path but it's not working.

Comments

Can you please provide the snippet of code you're having trouble implementing?

Answer 1

To access the public folder, you would either have to use "%PUBLIC_URL%/your_files" or process.env.PUBLIC_URL.

For example:

import SomeSymbol from '%PUBLIC_URL%/SomeSymbol.svg';
<img src={process.env.PUBLIC_URL + '/SomeSymbol.svg'} />

However, I'd encourage you to create a folder inside the src folder and import your assets there.

More info: https://create-react-app.dev/docs/using-the-public-folder/