How to use the leaflet.icon function in leaflet

import React from 'react'
import { PureComponent } from 'react'
import { Map, TileLayer } from 'react-leaflet'
import L from 'leaflet'

// Example imports
import { Marker, Popup } from 'react-leaflet'

import 'leaflet/dist/leaflet.css'

import icon from 'leaflet/dist/images/marker-icon.png'
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'

let DefaultIcon = L.icon({
  iconUrl: icon,
  iconRetinaUrl: iconRetinaUrl,
  shadowUrl: iconShadow,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41]
})

L.Marker.prototype.options.icon = DefaultIcon

const position = [-33.0079, -58.5109]
const zoomLevel = 11
// const position = [51.505, -0.09]

attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            /&gt;
          
          
            
          
          {props.drawCircle &amp;&amp;

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

const planeIcon = L.icon({
    iconUrl: planeImg,
    iconSize: [64, 64],
    popupAnchor: [-3, -76],
    shadowUrl: '',
});
const radarIcon = L.icon({
    iconUrl: radarImg,
    iconSize: [64, 64],
    popupAnchor: [-3, -76],
    shadowUrl: ''
});

const maxRadars = 6;


export class RadarMap {

    constructor(zoomLevel) {
        this.L = L;
        this.map = this.L.map('map');
        var mainLayer = this.L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png', {
            attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',

var drawBillboard = function(image, dataurl) {
      iconOptions.iconUrl = dataurl || image;
      if (!defined(iconOptions.iconSize)) {
        iconOptions.iconSize = [image.width * scale, image.height * scale];
      }
      var w = iconOptions.iconSize[0],
        h = iconOptions.iconSize[1];
      var xOff = (w / 2) * (1 - horizontalOrigin) - pixelOffset.x;
      var yOff = (h / 2) * (1 + verticalOrigin) - pixelOffset.y;
      iconOptions.iconAnchor = [xOff, yOff];

      if (!color.equals(defaultColor)) {
        iconOptions.iconUrl = recolorBillboard(image, color);
      }
      marker.setIcon(L.icon(iconOptions));
    };
    var img = new Image();

LeafletMarkerAdapter.prototype.setIconURL = function (iconURL) {
  var newIcon = L.icon({
    iconUrl: iconURL
  });
  this._nativeMarker.setIcon(newIcon);
};

import React, { Component } from 'react';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { Card, CardText, Button } from 'reactstrap';

import userLocationURL from './user_location.svg';
import messageLocationURL from './message_location.svg';

import MessageCardForm from './MessageCardForm';
import { getMessages, getLocation, sendMessage } from './API';

import './App.css';

const myIcon = L.icon({
  iconUrl: userLocationURL,
  iconSize: [50, 82]
});

const messageIcon = L.icon({
  iconUrl: messageLocationURL,
  iconSize: [50, 82]
});

class App extends Component {
  state = {
    location: {
      lat: 51.505,
      lng: -0.09,
    },
    haveUsersLocation: false,

createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
		var pinColor = color.substr(1);
		var icon = L.icon({
			iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
			iconSize: [21, 34],
			iconAnchor: [10, 34],
			popupAnchor: [0, -34],
			shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
			shadowSize: [40, 37],
			shadowAnchor: [12, 35]
		});
		var iconInfo = {
			size: [21, 34],
			icon: icon
		};
		onMarkerIconReady(iconInfo);
	}

zoom: options.zoom,
        minZoom: window.innerWidth < 768 ? 5 : 6
      })

      this.initializeGeocoderControl()
      this.initializeBasemapLayers()
      this.map.zoomControl.setPosition('bottomright')
      this.initializeLayerStore(this.props, this.map)

      const defaultMarker = L.icon({
        iconUrl: defaultMarkerIcon,
        iconAnchor: [24, 44],
        popupAnchor: [0, -44]
      })

      const watchLocationMarker = L.icon({
        iconUrl: gpsFixedIcon,
        iconAnchor: [18, 20]
      })

      this.geolocationControl(defaultMarker)

      this.geolocateCircle = null
      this.geolocateIcon = null
      this.popupContentNode = null

      this.map
        .on('locationfound', (e) => {
          if (this.geolocateCircle) {
            this.map.removeLayer(this.geolocateCircle)
          }
          if (this.geolocateIcon) {

const getIcon = (options, iconURL) => {
  const multiplier = window.innerWidth >= 576 ? 1 : 0.6;
  if (iconURL && options) {
    const { width, height } = options;
    return L.icon({
      iconUrl: iconURL,
      iconSize: [multiplier * width, multiplier * height]
    });
  } else {
    return L.icon({
      iconUrl: challenge,
      iconSize: [multiplier * 35, multiplier * 35]
    });
  }
};

function createVesselIcons(shouldUseRoundIcon) {
  if (shouldUseRoundIcon) {
    const icon = Leaf.icon({
      iconUrl: 'vessel-marker-round.png',
      iconSize: [30, 30],
      iconAnchor: [15, 15]
    })
    return {large: icon, medium: icon, small: icon}
  }
  const large = Leaf.icon({
    iconUrl: 'vessel-large.png',
    iconSize: [20, 50],
    iconAnchor: [10, 25]
  })

  const medium = Leaf.icon({
    iconUrl: 'vessel-medium.png',
    iconSize: [16, 40],
    iconAnchor: [8, 20]
  })

  const small = Leaf.icon({
    iconUrl: 'vessel-small.png',
    iconSize: [12, 30],
    iconAnchor: [6, 15]
  })