我想在一个 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 会怎样?
有什么解决办法吗?
最佳答案
创建一个 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>
关于javascript - 如何通过 vue-svg-loader 在 vue.js 中导入多个 svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59148672/