Estoy tratando de crear un ícono de marcador personalizado para mi componente de folleto en reaccionar. Estoy definiendo una clase de icono e intentando hacer que iconURL sea la ubicación del PNG que uso. El problema con el que me encuentro es que iconURL solo funciona para 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|abcdef&chf=a,s,ee00FFFF'.

También intenté usar el directorio de un PNG en mi proyecto, así como una URL de un icono proporcionado por Google, por ejemplo, 'https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Acable% 3A'. Sin embargo, ambos no muestran la imagen correctamente. ¿Es un problema con los PNG específicos que estoy usando? Intenté anular el ícono de URL predeterminado con L.Icon.Default.prototype.options.iconUrl, sin embargo, solo produjo los mismos resultados. A continuación también habrá una imagen de cómo se ve el ícono cuando intenta usar los íconos que no funcionan actualmente.

(EDITAR: Incluir una imagen de mi directorio en caso de que ayude)

 function OutageIndicator({ outage }) { const LeafIcon = L.Icon.extend({ options: { iconSize: [38, 95], shadowSize: [50, 64], iconAnchor: [22, 94], shadowAnchor: [4, 62], popupAnchor: [-3, -76] } }); L.Icon.Default.prototype.options.iconUrl = 'icons/marker.png'; const streamingIcon = new LeafIcon({ iconUrl:"icons/marker.png" }); return !coords ? ( "Loading" ) : ( <Marker position={[coords.lat, coords.lng]} icon={streamingIcon}> <Popup className={outage.service_type}> {outage.service_type}: {outage.service_name} </Popup> </Marker> ); } function OutageMap() { //a bunch of other lines of code return ( <> <button onClick={setReportIsOpenTrue}>Report Outage</button> <MapContainer center={[44, -85]} zoom={7} scrollWheelZoom={true}> <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> {allOutages.map((mock) => ( <OutageIndicator outage={mock} /> ))} </MapContainer> </> ); } export default OutageMap;