I want to import multiple svg’s in one vue component. The documentation says I Have to import each one of them, but how can I import multiple svgs in a much shorter and cleaner way?
vue-svg-loader documentation: 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>
What happens if I got over one hundred svg’s I want to import?
Any ideas to solve this?
Advertisement
Answer
Create a base component and register it globally since you’ll use it very frequently.
Create a <BaseIcon>
component that uses require
with expression to create a context for the SVG modules:
<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>
Note: We use <Component>
to handle dynamic components, which assumes you’ll use vue-svg-loader
and the SVGs are treated as components. If that is not the case, use an <img>
tag instead and use src
instead of is
.
Registering the base component globally:
If you’re only creating a single base component, you can just go to your main.js
file and before mounting the app do:
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')
Else, if you want something a little bit more complex, take a look at how this boilerplate registers base components automatically.
Finally, use the component like so:
<template> <div> <BaseIcon name="info" /> <BaseIcon name="help" /> <BaseIcon name="close" /> </div> </template> <script> export default { name: 'SomeComp', } </script>