To optimize your workflow, consider creating a base component and registering it globally for frequent use.
Start by developing a <BaseIcon> component that leverages the require with expression method to establish a context for 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',
inheritAttrs: false,
props: {
name: {
type: String,
required: true,
},
},
}
</script>
<style>
.BaseIcon {
/* Define default CSS styles */
}
</style>
Tip: The usage of <Component> is geared towards managing dynamic components, assuming integration with vue-svg-loader where SVGs are treated as components. For different scenarios, employ an <img> tag using src instead of is.
To make the base component accessible globally:
If you have a single base component, simply open your main.js file and include these lines before mounting the app:
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')
For more intricate setups, explore how this boilerplate automates base component registration.
To utilize the component effectively, follow this structure:
<template>
<div>
<BaseIcon
name="info"
/>
<BaseIcon
name="help"
/>
<BaseIcon
name="close"
/>
</div>
</template>
<script>
export default {
name: 'SomeComp',
}
</script>