JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css">
<html>
<head>
  <body>
    <div id="map"></div>
  </body>
</head>
</html>

CSS

#map {
  height: 400px;
}

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap'
}).addTo(map);

let fontSize = "60px";
let svgGcTextId = "";
let rotation = "45";
let text = "LONDON";
let latlng = [51.505, -0.09];

let svgIcon = L.divIcon({
  html: `
<svg
  version="1.1"
  id="${svgGcTextId}"
  preserveAspectRatio="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <text width="5000" height="5000" x="0" y="${fontSize}" transform="rotate(${rotation})" font-size="${fontSize}">${text}</text>
</svg>`,
  className: "",
  iconSize: [24, 10],
  iconAnchor: [0, 0],
});

let marker = L.marker(latlng, {
  icon: svgIcon,
  interactive: true
});
map.addLayer(marker);

let referenceMarker = L.circleMarker(latlng, {radius: 5});
map.addLayer(referenceMarker);