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

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>组件，该组件将require与表达式一起使用，为 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>来处理动态组件，前提是您将使用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>

Answer 2

不幸的是，这个答案中描述的方法对我不起作用(Vue-CLI 3 + Vue 2(。

例子： 外部 SVG：

<img :src="require(`@/assets/img/icons/base/config.svg`).default" />

内联 SVG(动态组件(：

<component :is="require(`@/assets/img/icons/base/config.svg?inline`)" />

内联 SVG(组件(：

<template><config-icon /></template>
import ConfigIcon from '@/components/icons/config-icon.vue';

将下面的代码添加到vue.config.js：

chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule.delete('type');
svgRule.delete('generator');
svgRule
.oneOf('inline')
.resourceQuery(/inline/)
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader')
.end()
.end()
.oneOf('external')
.use('file-loader')
.loader('file-loader')
.options({
name: 'assets/[name].[hash:8].[ext]',
});
},