无法检索svg文件的内容以内嵌显示

Question

在我的自定义内嵌svg组件中，我试图显示svg文件的内容。但是，我得到的只是svg文件的标题而不是其内容。

为什么以及如何解决？

<template>
  <span class="svg-inline" :class="`svg-inline-${name}`" v-html="url"></span>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: ''
      }
    },
    computed: {
      url () {
        return require(`~/assets/svg/${this.name}.svg`)
      }
    }
  }
</script>

我以这种方式使用此组件：

<svg-inline name="wmc_text" />