How to load an SVG icon in leaflet?

Question

I must load markers SVG in leaflet map. I have method which return:

fillColor: ""
fillOpacity: 1
path: ""
scale: 
strokeColor: ""
strokeWeight: 

How include to html code, I read that method to load SVG in leaflet:

const url: any = (this.getMarkerIcon(marker))
const path: string = url.path

const fillColor = url.fillColor
const strokeColor = url.strokeColor
const fillOpacity = url.fillOpacity
const iconSettings = {
  mapIconUrl: '<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149 178"><path fill="{fillColor}" stroke="{strokeColor}  d="{path}"/></svg>',
};
let divIcon = L.divIcon({

  className: "leaflet-data-marker",
  html: L.Util.template(iconSettings.mapIconUrl, iconSettings).replace('#', '%23'),
  iconAnchor: [12, 32],
  iconSize: [25, 30],
  popupAnchor: [0, -28]
});

How can I load SVG icon in leaflet?

Answer 1

For divicon there is a option html, so SVG icon you need to pass in html parameter.

Code snippet:

var map = L.map('map', {
        zoom: 5,
        //minZoom:9,
        center: new L.latLng([50, 12]),
        layers: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
        layers: [
            L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
                subdomains: 'abcd',
                maxZoom: 19
            })
        ]
    }),
    locationLayer = new L.FeatureGroup(),
    markerTemp = L.marker(),
    iconSettings = {
        mapIconUrl: '<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149 178"><path fill="{mapIconColor}" stroke="#FFF" stroke-width="6" stroke-miterlimit="10" d="M126 23l-6-6A69 69 0 0 0 74 1a69 69 0 0 0-51 22A70 70 0 0 0 1 74c0 21 7 38 22 52l43 47c6 6 11 6 16 0l48-51c12-13 18-29 18-48 0-20-8-37-22-51z"/><circle fill="{mapIconColorInnerCircle}" cx="74" cy="75" r="61"/><circle fill="#FFF" cx="74" cy="75" r="{pinInnerCircleRadius}"/></svg>',
        mapIconColor: '#cc756b',
        mapIconColorInnerCircle: '#fff',
        pinInnerCircleRadius: 48
    },

    // icon normal state
    divIcon = L.divIcon({
        className: "leaflet-data-marker",
        html: L.Util.template(iconSettings.mapIconUrl, iconSettings),
        iconAnchor: [12, 32],
        iconSize: [25, 30],
        popupAnchor: [0, -28]
    }),

    // icon active state
    divIconActive = L.divIcon({
        className: "leaflet-data-marker",
        html: L.Util.template(iconSettings.mapIconUrl, iconSettings),
        iconAnchor: [18, 42],
        iconSize: [36, 42],
        popupAnchor: [0, -30]
    }),

    coords = [
        [53, 13],
        [49, 10],
        [46, 12],
        [51, 16]
    ],
    markerArray = [],
    iMarker = -1;

function setActiveIcon(marker) {
    marker.setIcon(divIconActive);
};

coords.forEach((e, i) => {

    var marker = L.marker(e, {
        icon: divIcon,
        id: i
    });

    locationLayer.addLayer(marker);

    marker.on('mouseover', function(e) {
        if (iMarker == i) return;
        setTimeout(setActiveIcon, 10, this);
        if (iMarker >= 0) markerArray[iMarker].setIcon(divIcon);
        iMarker = i;
    });

    marker.on('mouseout', function(e) {
        this.setIcon(divIcon);
        iMarker = -1;
    });
    markerArray[i] = marker;
});

locationLayer.addTo(map);

html,
body,
#map {
  height: 100%;
  width: 100%;
  background-color: #d5dbdd;
}
#map {
  box-shadow: (0px 0px 20px rgba(0, 0, 0, .3))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" rel="stylesheet" />

<div id="map"></div>