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

Question

我正在尝试使用这个库 cryptocurrency-icons来 self 的 Nuxt SSR 项目中的 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>
/**
 * 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://v2.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>

当我尝试在页面/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?