如何通过 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>&nbsp; <Component&nbsp; &nbsp; &nbsp;:is="require(`@/assets/svgs/${name}.svg`).default"&nbsp; &nbsp; &nbsp;class="BaseIcon"&nbsp; &nbsp; &nbsp;v-bind="$attrs"&nbsp; &nbsp; &nbsp;@v-on="$listeners"&nbsp; /></template><script>export default {&nbsp; name: 'BaseIcon',&nbsp; // Transparent wrapper component&nbsp; // https://vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance&nbsp; inheritAttrs: false,&nbsp; props: {&nbsp; &nbsp; name: {&nbsp; &nbsp; &nbsp; type: String,&nbsp; &nbsp; &nbsp; required: true,&nbsp; &nbsp; },&nbsp; },}</script><style>&nbsp;.BaseIcon {&nbsp; &nbsp;/* Add some default CSS declaration blocks */&nbsp;}&nbsp;</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 = falsenew Vue({&nbsp; render: h => h(App),}).$mount('#app')否则，如果您想要更复杂的东西，请查看此样板如何自动注册基本组件。最后，像这样使用组件：<template>&nbsp; <div>&nbsp; &nbsp; <BaseIcon&nbsp; &nbsp; &nbsp; name="info"&nbsp; &nbsp; />&nbsp; &nbsp; <BaseIcon&nbsp; &nbsp; &nbsp; name="help"&nbsp; &nbsp; />&nbsp; &nbsp; <BaseIcon&nbsp; &nbsp; &nbsp; name="close"&nbsp; &nbsp; />&nbsp; </div></template><script>export default {&nbsp; name: 'SomeComp',}</script>