如何通过 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

创建一个基础组件并在全局范围内注册它，因为您会非常频繁地使用它。

创建一个<BaseIcon>使用requirewith 表达式为 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://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>处理动态组件，假设您将使用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')

否则，如果您想要更复杂的东西，请查看此样板如何自动注册基本组件。

最后，像这样使用组件：

<template>

  <div>

    <BaseIcon

      name="info"

    />

    <BaseIcon

      name="help"

    />

    <BaseIcon

      name="close"

    />

  </div>

</template>

<script>

export default {

  name: 'SomeComp',

}

</script>