custom marker icon with react-leaflet

Question

I tried everything I found on the web, Stackoverflow and Github, and I still can't make it.

I want to make a custom marker with a custom icon, but with my code below I always got an error : 'TypeError: options.icon.createIcon is not a function'

Here is my code (no error on the paths to folders, everything is in src/js or src/img)

Icon.js

import L from 'leaflet';  const iconPerson = L.Icon.extend({   options: {     iconUrl: require('../img/marker-pin-person.svg'),     iconRetinaUrl: require('../img/marker-pin-person.svg'),     iconAnchor: null,     popupAnchor: null,     shadowUrl: null,     shadowSize: null,     shadowAnchor: null,     iconSize: new L.Point(60, 75),     className: 'leaflet-div-icon'   } });  export { iconPerson }; 

MarkerPinPerson

import React from 'react'; import { Marker } from 'react-leaflet'; import {  iconPerson  } from './Icons';   export default class MarkerPinPerson extends React.Component {    render() {      return (       <Marker         position={this.props.markerPosition}         icon={ iconPerson }         >       </Marker>       );   } } 

Really looking for your help !

Answer 1

I finally found the correct code for the Icon.js file :

import L from 'leaflet';  const iconPerson = new L.Icon({     iconUrl: require('../img/marker-pin-person.svg'),     iconRetinaUrl: require('../img/marker-pin-person.svg'),     iconAnchor: null,     popupAnchor: null,     shadowUrl: null,     shadowSize: null,     shadowAnchor: null,     iconSize: new L.Point(60, 75),     className: 'leaflet-div-icon' });  export { iconPerson }; 

Answer 2

I was brought here while trying to figure out how to render a custom icon server side (using react-leaflet-universal). I thought I'd post this in case anyone in the future finds themselves here for the same reason. Just as in the case of react-leaflet-markercluster, I was able to get this working by requiring leaflet inside the return function like:

<Map center={this.props.center}              zoom={zoom}              className={leafletMapContainerClassName}              scrollWheelZoom={false}              maxZoom={18}              preferCanvas={false}         >             {() => {                 const MarkerClusterGroup = require('react-leaflet-markercluster').default;                 const L = require('leaflet');                  const myIcon = L.icon({                     iconUrl: require('../assets/marker.svg'),                     iconSize: [64,64],                     iconAnchor: [32, 64],                     popupAnchor: null,                     shadowUrl: null,                     shadowSize: null,                     shadowAnchor: null                 });                  return (                     <React.Fragment>                         <TileLayer                             url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"                             attribution=''                             setParams={true}                         />                         <MarkerClusterGroup>                             {coordArray.map(item => {                                 return (                                     <Marker icon={myIcon} key={item.toString()} position={[item.lat, item.lng]}>                                         {item.title && <Popup>                                             <span>{item.title}</span>                                         </Popup>}                                     </Marker>                                 )                             })}                         </MarkerClusterGroup>                     </React.Fragment>                 );             }}         </Map>