Fontawsome 作为 react-google-maps/api 组件的自定义标记？

Question

is there a way to use FA icon for the marker? I use this code sample:

import React, { Component } from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

class MyComponents extends Component {
  render() {
    return (
      <LoadScript
        googleMapsApiKey="YOUR_API_KEY"
      >
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={10}
        >
          <Marker
          position={center}
          icon={'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'}
        />
        </GoogleMap>
      </LoadScript>
    )
  }
}

There is the icon property on the Marker component, but it works like an url, like:

<Marker position={center} icon={'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'} />

I want to use the FA as a custom marker.

import { IconName } from "react-icons/fa";

Answer 1

Yes, you can use fortaswome icons for marker.

If want to use react-icons , here is how you do that:

import { FaBeer } from "react-icons/fa";
     ...

      <Marker
            position={{
              lat: 18.559024,
              lng: -68.388886
            }}
            icon={{
              path: FaBeer().props.children[0].props.d,
              fillColor: "#0000ff",
              fillOpacity: 1,
              strokeWeight: 1,
              strokeColor: "#ffffff",
              scale: 0.075
            }}
          />

Other option is to use @fortawesome/free-solid-svg-icons . In that case, code will look something like this:

import { faCoffee } from "@fortawesome/free-solid-svg-icons/faCoffee";

  ...

       <Marker
            position={{
              lat: 18.559024,
              lng: -68.388886
            }}
            icon={{
              path: faCoffee.icon[4],
              fillColor: "#0000ff",
              fillOpacity: 1,
              strokeWeight: 1,
              strokeColor: "#ffffff",
              scale: 0.075
            }}
          />

Source: official documentation

Working example