javascript - 如何通过 vue-svg-loader 在 vue.js 中导入多个 svg

Question

我想在一个 vue 组件中导入多个 svg。文档说我必须导入它们中的每一个，但我如何才能以更短和更清晰的方式导入多个 svg？

vue-svg-loader 文档:https://vue-svg-loader.js.org/

<script>
import Info from "@/assets/svgs/info.svg";
import Help from "@/assets/svgs/help.svg";
import Close from "@/assets/svgs/close.svg";
// etc. pp.

export default {
  components: {
    Info,
    Help,
    Close
  }
</script>

如果我要导入超过一百个 svg 会怎样？

有什么解决办法吗？

Answer 1

创建一个 base component并在全局范围内注册它，因为您会经常使用它。

---

创建一个 <BaseIcon>使用 require with expression 的组件为 SVG 模块创建上下文:

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

<script>
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 */
 }
 </style>

注意:我们使用<Component>处理dynamic components ，假设您将使用 vue-svg-loader并且 SVG 被视为组件。如果不是这种情况，请使用 <img>改为标记并使用 src而不是 is .

---

全局注册基础组件:

如果您只创建一个基础组件，您可以转到您的 main.js文件并在安装应用程序之前执行以下操作:

import Vue from 'vue'
import BaseIcon from './components/_base/BaseIcon.vue'
import App from './App.vue'

Vue.component('BaseIcon', BaseIcon)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

否则，如果您想要更复杂的东西，请查看如何 this boilerplate registers base components automatically .

---

最后，像这样使用组件:

<template>
  <div>
    <BaseIcon
      name="info"
    />
    <BaseIcon
      name="help"
    />
    <BaseIcon
      name="close"
    />
  </div>
</template>

<script>
export default {
  name: 'SomeComp',
}
</script>