How to use the @fortawesome/fontawesome-svg-core.findIconDefinition function in @fortawesome/fontawesome-svg-core

connectedCallback() {
        this._mapId = this.getAttribute('map-id');

        // Geolocation element not visible by default
        this.style = 'display: none';

        const geolocationButton = document.createElement('button');
        geolocationButton.classList = 'btn btn-danger btn-sm';

        // Set icon
        const iconDef = findIconDefinition({prefix: 'far', iconName: 'dot-circle'});
        const i = icon(iconDef, {
            transform: {
                size: 25
            }
        });
        geolocationButton.appendChild(i.node[0]);

        this.appendChild(geolocationButton);

        if ('geolocation' in navigator) {
            // Element is visible only if the browser has geolocation capability
            this.style.display = 'block';

            navigator.geolocation.getCurrentPosition(function(position) {
                // console.log(position.coords.latitude);
                // console.log(position.coords.longitude);

fad,
  faCoffee,
  faCog,
  faSpinner,
  faQuoteLeft,
  faSquare,
  faCheckSquare
)

// We're only adding faCoffee to the library so we can look it up.
// And we're only doing that to demonstrate how the API types might be used.
// This is not a realistic scenario. You wouldn't normally do things in such a round about way.
// It's really just to demonstrate use of the types.
library.add(faCoffee)
const coffeeLookup: IconLookup = { prefix: 'fas', iconName: 'coffee' }
const coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)

export class App extends React.Component {
  render() {
    return (
      <div id="app">
        <main>
          <div>
            <h2>
              react-fontawesome (TypeScript edition)
            </h2>

            <ul>
              <li>
                
              </li>
              <li></li></ul></div></main></div>

function drawFontAwesomeIcon(node, ctx, iconName, x, y, size, color = "white", prefix = "far") {
    let def = findIconDefinition({prefix: prefix, iconName: iconName});
    if (!def) return;
    let icn = icon(def, {
        transform: {
            // can't use scale here, as that apparently only affects CSS not the actual path data
        }
    });
    ctx.fillStyle = color;
    let path = new Path2D(icn.icon[4]);
    // path.moveTo(x, y);
    ctx.save();
    ctx.translate(x, y);
    ctx.scale(size, size);
    ctx.fill(path);
    ctx.restore();
}

connectedCallback() {
        this._mapId = this.getAttribute('map-id');

        this._zoomByRectangleButton = document.createElement('button');
        this._zoomByRectangleButton.classList = 'btn btn-danger btn-sm';

        // Set icon
        const iconDef = findIconDefinition({prefix: 'far', iconName: 'square'});
        const i = icon(iconDef, {
            transform: {
                size: 30
            }
        });
        this._zoomByRectangleButton.appendChild(i.node[0]);

        // Listen click event
        this._zoomByRectangleButton.addEventListener('click', () => {
            LizmapMapManager.getMap(this.mapId).zoomByRectangleToggle();
        });

        this.appendChild(this._zoomByRectangleButton);

        MainEventDispatcher.addListener(this.onZoomByRectangleSet.bind(this),
            {type: 'ui-zoom-by-rectangle-set', mapId: this.mapId});

zoomin.type = 'button';
        zoomin.classList = 'btn btn-danger btn-sm d-block mb-1';

        zoomout.type = 'button';
        zoomout.classList = 'btn btn-danger btn-sm d-block';

        // Set icon
        const iconPlus = icon(findIconDefinition({prefix: 'fa', iconName: 'plus'}), {
            transform: {
                size: 30
            }
        });
        zoomin.appendChild(iconPlus.node[0]);

        const iconMinus = icon(findIconDefinition({prefix: 'fa', iconName: 'minus'}), {
            transform: {
                size: 30
            }
        });
        zoomout.appendChild(iconMinus.node[0]);

        zoomin.addEventListener('click', () => {
            LizmapMapManager.getMap(this.mapId).zoomIn();
        });

        zoomout.addEventListener('click', () => {
            LizmapMapManager.getMap(this.mapId).zoomOut();
        });

        this.appendChild(zoomin);
        this.appendChild(zoomout);

connectedCallback() {
        this._mapId = this.getAttribute('map-id');

        // Create button
        const initialExtentButton = document.createElement('button');
        initialExtentButton.type = 'button';
        initialExtentButton.classList = 'btn btn-danger btn-sm';

        // Set icon
        const iconDef = findIconDefinition({prefix: 'fas', iconName: 'expand-arrows-alt'});
        const i = icon(iconDef, {
            transform: {
                size: 30
            }
        });
        initialExtentButton.appendChild(i.node[0]);

        // Listen click event
        initialExtentButton.addEventListener('click', () => {
            LizmapMapManager.getMap(this.mapId).center = LizmapMapManager.getMap(this.mapId).initialCenter;
            LizmapMapManager.getMap(this.mapId).zoom = LizmapMapManager.getMap(this.mapId).initialZoom;
        });

        this.appendChild(initialExtentButton);
    }

protected findIconDefinition(i: IconProp | IconDefinition): IconDefinition | null {
    const lookup = faNormalizeIconSpec(i, this.config.defaultPrefix);
    if ('icon' in lookup) {
      return lookup;
    }

    const definition = this.iconLibrary.getIconDefinition(lookup.prefix, lookup.iconName);
    if (definition != null) {
      return definition;
    }

    const globalDefinition = findIconDefinition(lookup);
    if (globalDefinition != null) {
      const message =
        'Global icon library is deprecated. ' +
        'Consult https://github.com/FortAwesome/angular-fontawesome/blob/master/UPGRADING.md ' +
        'for the migration instructions.';
      if (this.config.globalLibrary === 'unset') {
        console.error('FontAwesome: ' + message);
      } else if (!this.config.globalLibrary) {
        throw new Error(message);
      }

      return globalDefinition;
    }

    faWarnIfIconDefinitionMissing(lookup);
    return null;