How to add multiple icon for same position in React-leaflet version 3

Question

I'm developing an app using React-leaflet version 3 with TypeScript. In my app, I have the requirement to add multiple icons for one position. EX: A particular [lat,long] position identified as having a blood donation camp, an outdoor checkup center at the morning 8 A.M. And at the afternoon 3 P.M the same location would have a makeshift music concert and a free-food center. So, at a time I need to place atleast two icons for my marker. Ex: for the morning the icon for blood donation camp and outdoor checkup. In the marker tag the icon attribute allows to have only one value.

So, I tried this option. However no luck so far.

I used L.divIcon

const mapNodeIcon = L.divIcon({
html: `<div class="multi-icon-div">
<img src="../icon/myIcons/bloodDonCamp.svg" width="30px"/>
<img src="../icon/myIcons/outdoorCheck.svg" width="30px"/>  
</div>`,
iconAnchor: [10, 10],
popupAnchor: [0, -19],
iconSize: [55, 55],
});

Marker Tag

<Marker 
        key={myMap.id} 
        position={[lat, lng]}
        icon={mapNodeIcon}
        >
        <Popup>
          <h3>This is the event location</h3>
        </Popup>
      </Marker>

This problem here I'm facing is,the svg icon images are not loading in the div though the iconDiv is visible as a marker on the map. How to approach this issue?

May be, it's a simple question but even it can be solved this way, is this a good approach ? Is there any other possible efficient approach ? As, my map will render different svg icons depending on time(morning and afternoon) I have doubts that if this is a faster approach for a multinode map.

Any idea and help is very much appreciated.

Answer 1

Importing svg the way you did it won't work. Below you have the correct svg import.

import React from 'react';
import {ReactComponent as Logo} from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <Logo />
    </div>
  );
}
export default App;

At this link you have a whole list of ways to add svg

-- Update--

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import tileLayer from '../util/tileLayer';
import L from 'leaflet';

import facebook from './facebook-square.svg';
import twitter from './twitter.svg';

const center = [52.22977, 21.01178];

const MapWrapper = () => {

  const mapNodeIcon = L.divIcon({
    html: `<div style="display: flex;">
      <img src="${facebook}" width="30px"/>
      <img src="${twitter}" width="30px"/>  
    </div>`,
    iconAnchor: [10, 10],
    popupAnchor: [0, -19],
    iconSize: [55, 55],
  });

  return (
    <MapContainer center={center} zoom={18} scrollWheelZoom={false}>
      <TileLayer {...tileLayer} />

      <Marker position={center} icon={mapNodeIcon}>
        <Popup>Center Warsaw</Popup>
      </Marker>

    </MapContainer>
  )
}

export default MapWrapper;