I am looking to create a custom component in Vue that has the following props:
- text = the text to display in the link.
- icon = the identifier of the icon to display next to the link.
< sidebar-link text="Home" icon="fa-home">
Below is the .Vue template code for my component.
<template>
<div id="sidebarItem">
<a href="/index.php">
<div id="sidebarIcon"><i :class="{fa : true}" aria-hidden="true"></i></div>
<div id="sidebarText">{{ text }}</div>
</a>
</div>
</template>
<script>
export default {
props: ['text', 'icon'],
data () {return {}}
}
</script>
Currently, I have the default Font-Awesome code in my template:
<i class="fa fa-home" aria-hidden="true"></i>
I would like to add a class to my component based on its prop value.
<sidebar-link text="Home" icon="fa-home"></sidebar-link>
Thank you.