Добавление маркера с пользовательским изображением на карту

Template

<yandex-map
  :settings="{
    location: {
      center,
      zoom,
    },
    showScaleInCopyrights: true,
    theme,
  }"
  :width="width"
  :height="height"
>
  <yandex-map-default-scheme-layer />
  <yandex-map-default-features-layer />

  <yandex-map-marker v-for="marker in markers" :key="marker.iconSrc" :settings="{ coordinates: marker.coordinates }" position="top-center left-center">
    <img
      class="pin"
      alt=""
      :src="marker.iconSrc"
      @click="produceAnAlert"
    />
  </yandex-map-marker>
</yandex-map>

Setup

import {
  YandexMap,
  YandexMapDefaultFeaturesLayer,
  YandexMapDefaultSchemeLayer,
  YandexMapMarker,
} from 'vue-yandex-maps';
import type { LngLat } from '@yandex/ymaps3-types';
import { ref } from 'vue';

const counter = ref(0);

const produceAnAlert = () => {
  alert(`${++counter.value} capybara`);
};

const markers = [
  {
    coordinates: [37.623, 55.752] as LngLat,
    iconSrc:
        'https://yastatic.net/s3/front-maps-static/maps-front-jsapi-3/examples/images/marker-custom-icon/yellow-capybara.png',
  },
  {
    coordinates: [38.125, 55.622] as LngLat,
    iconSrc:
        'https://yastatic.net/s3/front-maps-static/maps-front-jsapi-3/examples/images/marker-custom-icon/purple-capybara.png',
  },
  {
    coordinates: [37.295, 55.415] as LngLat,
    iconSrc:
        'https://yastatic.net/s3/front-maps-static/maps-front-jsapi-3/examples/images/marker-custom-icon/green-capybara.png',
  },
];

Style

<style scoped>
.pin {
  cursor: pointer;
  max-width: unset;
  width: 75px;
  height: 75px;
  border-radius: 50%;
}
</style>