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

Question

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

Проблема в том, что а.), Когда я создаю свои собственные файлы 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-изображений, так как текущие методы у меня есть пытались привести к пустым изображениям, или просто альфа-канал изображения

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

Любая помощь очень важна оценил,

Спасибо.

Answer 1

Мне нужен файл SVG для значка в моем коде. Программа может ссылаться на этот файл SVG двумя способами; либо он хранится локально в каталоге программы, либо просто просматривает его URL.

При ссылке на SVG в CSS вы можете использовать встроенный URI * 1006. *.

Вместо протокола:

https://

вам нужно начать URI данных с MIME-типа и кодировки:

data:image/svg+xml;utf8,

Но после этого Вы можете добавить SVG без каких-либо изменений:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" fill="rgb(188, 187, 187)" /><path d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z" fill="rgb(244, 128, 35)" /></svg>

Рабочий пример:

div {
width: 180px;
height: 180px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" fill="rgb(188, 187, 187)" /><path d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z" fill="rgb(244, 128, 35)" /></svg>');
}

<div></div>