Создание пользовательских иконок в CSS с помощью SVG

---

Привет,

Я пытаюсь использовать свои собственные значки в css-файле для отображения значков на веб-сайте react.
Ниже приведен код, который ведет к точке, где я на самом деле создаю маркеры (я использую API MapBox. (См. нижнюю часть кода)

Проблема в том, что
а) когда я создаю свои собственные SVG-файлы в illustrator и либо помещаю их в каталог проекта, либо делаю ссылку на них для ссылки на файл, ни один из них не появляется на моей карте.
б) я нашел чей-то значок и использовал его, и он может визуализировать этот значок, но он слишком велик.

import React from "react";
import mapboxgl, { LngLat } from "mapbox-gl";
import "./GoogleMap.css";

import db from "../../firebaseConfig";
import { Marker } from "react-simple-maps";
var image01 = require("../../assets/droneIcon.png");
var firebase = require("firebase/app");
require("firebase/auth");
require("firebase/database");

const auth = require("../../auth.json");

mapboxgl.accessToken =
  "pk.eyJ1IjoiamVycnkyMDE4IiwiYSI6ImNrNjA1N3d5NTA0Zmwza252OXNpcWpzYWEifQ.lBwSxATvYgUqiyGfIvC3tw";

class GoogleMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lng: 50,
      lat: 50,
      zoom: 10
    };
  }

  componentDidMount = () => {
    const { lng, lat, zoom } = this.state;

    var droneList = [];

    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: "mapbox://styles/mapbox/streets-v9",
      center: [lng, lat],
      zoom: zoom
    });

    map.on("move", () => {
      const { lng, lat } = map.getCenter();

      this.setState({
        lng: lng.toFixed(4),
        lat: lat.toFixed(4),
        zoom: map.getZoom().toFixed(2)
      });
    });

    var el = document.createElement("div");
    el.className = 'marker';
    el.style.backgroundImage = 'url(https://cdn1.iconfinder.com/data/icons/appliance-1/100/Drone-07-512.png)';
    el.style.width = "500px";
    el.style.height = "500px";

Что я уже пробовал:

Я попытался создать свой собственный SVG, создав необработанный файл git для его размещения и ссылки на него, однако я не могу найти нигде, чтобы превратить этот уменьшенный необработанный файл SVG в читаемое изображение для кода javascript. Я обнаружил, что SVG-файлы, созданные другими пользователями и опубликованные, могут быть помещены в API Карт и успешно отображаться.

Мне тоже нужно это сделать
1. Найдите способ отображения SVG-изображений, так как текущие методы, которые я пробовал, приводят к пустым изображениям или только к Альфа-каналу изображения

2. Найдите способ просто изменить размер значка, который делает рендеринг, чтобы я мог сохранить его в необходимых размерах пикселей, не делая его слишком большим для моего приложения.

Любая помощь очень ценится,

Спасибо.

---