如何从我的 nuxt js 组件中的 node_modules 文件夹动态加载 svg 图标？

Question

我正在尝试在我的 Nuxt SSR 项目中使用来自 Github 的这个库 cryptocurrency-icons

此库将所有 svg 图标添加到 ./node_modules/cryptocurrency-icons/svg/color 目录

我在 components/BaseCryptoIcon.vue 文件中做了如下组件

<template>
  <Component
    :is="
      require(`~/node_modules/cryptocurrency-icons/svg/color/${name}.svg`)
        .default
    "
    class="BaseIcon"
    v-bind="$attrs"
    @v-on="$listeners"
  />
</template>

<script>
/**
 * https://stackoverflow.com/questions/59148672/how-to-import-multiple-svgs-in-vue-js-via-vue-svg-loader
 */
export default {
  name: 'BaseIcon',

  // Transparent wrapper component
  // https://vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance
  inheritAttrs: false,

  props: {
    name: {
      type: String,
      required: true,
    },
  },
}
</script>

<style>
.BaseIcon {
  /* Add some default CSS declaration blocks */
  width: 32px;
  height: 32px;
}
</style>

当我尝试在我的 pages/Index.vue 文件中使用它时，没有呈现任何内容。它也没有给出任何错误

<template lang="pug">
  base-crypto-icon(name='btc')
</template>

<script lang="javascript">
import BaseCryptoIcon from '~/components/BaseCryptoIcon.vue'
export default {
  components: {BaseCryptoIcon}
}
</script>

谁能告诉我如何在 Vue/Nuxt 中完成这项工作

Answer 1

你可以尝试在 components/BaseCryptoIcon.vue 中制作方法：

getIcon(name)  {
  return require(`~/node_modules/cryptocurrency-icons/svg/color/${name}.svg`).default
}

然后在模板中：

 <Component
    :is="getIcon(name)"
  />

2天前可能相关的问题： Why image path is not resolved by require() when passed as prop in NuxtJS?