Vue renders an SVG as the broken image icon

I'm trying to make a dynamic marker using vue2-leaflet. The icons are in src/assets/markers. They're basically the same SVG file with different fill attribute somewhere and named someColor.svg.

I'm doing it like this

// src/components/.../customMarker.vue

{
  computed: {
    icon: function () {
      return L.icon({
        iconUrl: require(`@/assets/markers/${this.color}.svg`),
        iconSize: [24, 24],
        iconAnchor: [12, 24]
      })
    }
  }
}

The component doesn't render correctly. And the weird thing is, instead of throwing a HTTP error when the icon is requested, the app actually renders the broken image icon and sends that as the response unlike a normal webpack error. Like this:

I tried requiring another SVG, namely Vuetify's logo and it works. Even when it's dynamically require'd.

My guess would be that Vue doesn't like my SVG, so here's one of them:

<!-- src/assets/markers/blue.svg -->

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
  <path fill="#2196f3"
    d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 
    12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"
  />
</svg>