因為svg檔案過大（>500k），不適合併入js，想要使用從src讀入svg整個內容。

※vue-svg-sprite、vue-svg-loader、vue-svg-inline-loader已試過，都是併入JS的方式

參考Jacky發表於Medium的方法〈Simple loading svg inline in Vue〉建立SvgInline.vue

<template>
    <span class="icon"></span>
</template>
<script>
let cache = new Map();
export default {
  props: {
    src: { type: String, required: true }
  },
  async mounted() {
    if (!cache.has(this.src)) {
      try {
        cache.set(this.src, fetch(this.src).then(r => r.text()));
      } catch (e) {
        cache.delete(this.src);
      }
    }
    if (cache.has(this.src)) {
      this.$el.innerHTML = await cache.get(this.src);
    }
  }
};
</script>

於view頁面上讀入svg

<template>
	<div>
		<svg-inline src="@/assets/img/svginlineitem.svg" />
	</div>
</template>

<script>
import SvgInline from '@/components/SvgInline.vue'

export default {
	components: {
		SvgInline
	}
}
</script>

svg圖片放置於assets/img資料夾內，會跟著webpack編譯而變動，但路徑部分始終無法變動。
請問是哪裡寫錯嗎？