leaflet-div-icon

App.js

import React, { Component } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import DivIcon from './div-icon';
export default class UserLocationExample extends Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef()
    this.state = {
      hasLocation: true,
      latlng: {
        lat: 51.505,
        lng: -0.09,
      },
    };
  }

  handleClick = () => {
    this.mapRef.current.leafletElement.locate();
  }

  handleLocationFound= (e) =>{
    this.setState({
      hasLocation: true,
      latlng: this.state.latlng,
    });
  }

  render() {
    const marker = this.state.hasLocation
      ? (
        <DivIcon position={this.state.latlng}>
          <svg className="user-location" viewBox="0 0 120 120" version="1.1"
            xmlns="http://www.w3.org/2000/svg">
            <circle cx="60" cy="60" r="50"/>
          </svg>
        </DivIcon>
      )
      : null;

    return (
      <Map
        style={{ width: '100%', height: '100vh' }}
        center={this.state.latlng}
        length={4}
        onClick={() => this.handleClick()}
        onLocationfound={(e) => this.handleLocationFound(e)}
        ref={this.mapRef}
        zoom={13}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        {marker}
      </Map>
    );
  }
}