0
Hello,
I have a date with icons imported using the svg-Loader to render the Svgs on the page. But they arrive as { "Functional": true } and do not appear in the final HTML.
Here’s an example of what I want below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div class="item" v-for="item in data" :key="item.label">
<span class="icon-main">
<slot>{{ item.icon }}</slot>
</span>
</div>
<script>
import IconOne from '../assets/svg/icon-one.svg';
import IconTwo from '../assets/svg/icon-two.svg';
export default {
name: 'Component',
data() {
return {
data: [
{
label: 'Icon One',
icon: IconOne,
},
{
label: 'Icon Two',
icon: IconTwo,
},
]
};
},
Could someone help me? Thank you.