看起来@nuxtjs/svg可以完成你想做的事情。安装后，尝试：

<template>
   <div v-html="src"></div>
</template>
<script>
export default {
    name: 'Icon',
    props: {
        name: {
            type: String,
            required: true
        }
    },
    computed: {
        src() {
            const src = require(`assets/icons/${this.name}.svg?raw`)
            return src
        }
    }
}
</script>

尝试这样做，注意**"/_nuxt/assets”**扩展。

<td v-if="actions" class="px-4 flex flex-row py-2 justify-end">
          <span v-for="action in actions" :key="action.key">
            <NuxtLink :to="action.to + '/' + item['actions']">
              <a>
                <img class="pl-2 pr-2" 
       :src="`/_nuxt/assets/images/dataTableIcons/${action.value}.svg`"
                  :alt="action.value">
              </a>
            </NuxtLink>
          </span>
        </td>

这并不容易，我尝试了一堆不同的解决方案，“似乎”他们应该工作。
我的理解是，它归结为Webpack如何处理“图像”资产，以及如何使用它们内联与独立的排序改变了定义。
我有一个SVG图标库，需要代码访问（例如在运行时更改颜色），所以我必须内联SVG。
创建一个新的组件，并为SVG名称添加一个propslot。在该组件中，将所有SVG作为代码添加进去。将每个SVG Package 在一个v-if中。

<template>
   <div class="svgIcon">
      <svg v-if="icon == 'name1'">...</svg>
      <svg v-if="icon == 'name2'">...</svg>
      <svg v-if="icon == 'name3'">...</svg>
      <svg v-if="icon == 'name4'">...</svg>
   </div>
</template>
<script>
  export default {
    props: ['icon']
  }
</script>

然后通过在槽中填充所需的名称来使用组件

<template>
   <div>
      <svgIcons :icon="name1"></svgIcons>
   </div>
</template>
<script>
  import svgIcons from '../path/to/iconsComponent.vue'
  export default {
    components: { svgIcons },
    ...
  }
</script>