Custom google map markers not showing and no error thrown VUEJS-CodePudding

I am currently using VueJS and the vue2-google-map package. My custom map markers do not appear on the map and I have checked that the file path is correct (Double clicking on the GET request in Dev Tools brings me to the icon). No errors are thrown. When I remove the :icon argument, the default map marker shows up without issues. Do advise!

<GmapMap :center="{lat: 1.290270 ,lng: 103.851959}" :zoom="12" map-type-id="roadmap" style="width:750px; height:750px" >
    <GmapMarker :key="index" v-for="(m,index) in markers" :position="m" :icon="{url:require('./home.svg'), size: {width:30, height:30}}">
    </GmapMarker>
</GmapMap>

CodePudding user response：

I manage to fix this. For some reason, converting the .svg into .ico via online convertors helped. I believe it might be something to do with the size of the .svg but I am not sure. For now, things seem to be working after using ICOs instead.