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

Question

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

此库将所有 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>
/**
 * 
 */
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 天前的可能相关问题：

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

How can I dynamically load svg icons from node_modules folder in my nuxt js component?

svg

vue.js

vue-component

vuejs2

nuxt.js