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

Template

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

    <yandex-map-marker
        v-for="marker in markers"
        :key="marker.iconSrc"
        position="top-center left-center"
        :settings="{ coordinates: marker.coordinates }"
    >
        <img
            alt=""
            class="pin"
            :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>