Maki icons are not being loaded

[Xinayder]

Describe the bug Some Maki icons are not being loaded properly.

To Reproduce

1. Add a ShapeSource with a GeoJSON feature with one of the following icons: home-15, heart-15
2. Create a SymbolLayer with iconImage style set to ['get', 'icon']

Please include a single standalone React Native component. Use one of our example screens as a starting point. Please simplify the example as much as possible.

Example:

import React, { useState, useEffect } from 'react';
import { Text, View, Animated, TouchableOpacity, ToastAndroid, Alert, Image } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';

const App = () => {

  MapboxGL.setAccessToken('ACCESS TOKEN');

  const [images, setImages] = useState<{}>({example: 'https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg'});

  const [geojson, setGeojson] = useState<{}>({
    type: 'FeatureCollection',
    features: []
  });

  useEffect(() => {
    let features = [];

    for (let i = 0; i < 10000; i++) {
      features.push({
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [19.090536 + (i / 1000), 47.497955 + (i / 1000)]
        },
        properties: {
          icon: 'home-15'
        }
      });
    }

    setGeojson({...geojson, features: features});
  }, []);

  const [style, setStyle] = useState<{}>({
    circleRadius: 25,
    circleColor: '#fff',
    circleStrokeColor: 'black',
    circleStrokeWidth: 2
  });

  return (
    <View style={{flex: 1}}>
      <MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Satellite}
        style={{flex: 1}}
        attributionEnabled={false}
        logoEnabled={false}
      >
        <MapboxGL.Camera
          zoomLevel={20}
          centerCoordinate={[19.095536, 47.497955]}
        />

        <MapboxGL.Images images={images} style={{borderRadius: 1000, overflow: 'hidden'}} />
        <MapboxGL.ShapeSource
          shape={geojson}
          id='tete2'
          cluster
          clusterMaxZoomLevel={15}
          clusterRadius={50}
        >
          <MapboxGL.CircleLayer
            id='testecirlce'
            style={style}
          />
          <MapboxGL.SymbolLayer
            id='teste'
            style={{
              iconImage: ['get', 'icon'],
              iconSize: 2,
              iconColor: 'tomato',
              textColor: 'black'
            }}
          />
        </MapboxGL.ShapeSource>
      </MapboxGL.MapView>
    </View>
  );
}

export default App;

Expected behavior The icon should render on screen.

Screenshots

• with home-15

• with airport-15

Versions (please complete the following information):

• Platform: Android and iOS
• Device: Poco F1
• Emulator/ Simulator: yes (iOS)
• OS: iOS 13, Android 10
• react-native-mapbox-gl Version 8.1.0-rc.4
• React Native Version 0.63.2

Additional context Some other icons, like garden-15, take a while to load, but the ones specified in here aren't being rendered.

[mfazekas]

@RockyTV thenks for the bugreport, i see multiple issues with the example:

1. i don't think we support svg icons
2. you example defines icons as example but refers to home-15

[Xinayder]

There are no issues with the example. After some search and testing with Mapbox Studio, I found out that every "official" style contains a subset of Maki icons, that's why some of them aren't being loaded. I had to clone an existing style and upload the whole spritesheet of Maki to have the missing icons.