Render as image

[matburnham]

I'd like to use react-icons for markers within a react-map-gl map. This means I need to render them as raster images as react-map-gl doesn't support vector images for GeoJSON layers.

I've got fairly close with this:

  let imageId = 'fa-beer';
  let img = new Image(100, 100);
  img.onload = () => {        
      if (!map.hasImage(imageId)) {
          map.addImage(imageId, img);
      }
  };

  let svgString = FaBeer().props.children[0].props.d;
  let svg = 'data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g><path d="' + svgString + '" /></g></svg>';
  img.src=uri;

Apart from the fact it doesn't quite render right, it's rather fragile to using other icons (e.g. CiAirportSign1 has more than one path in it). I think I might be going about this the wrong way. How can I get a reart-icons image into a HTMLImageElement to render inside react-map-gl rather than rendering it in my HTML?