Pass Date icon component to parent component

Question

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.

Answer 1

Hello!

Instead of interpolating the variable value item.icon, you must use the tag.

https://br.vuejs.org/v2/guide/components.html#Dynamic components

<div class="item" v-for="item in data" :key="item.label">
  <span class="icon-main">
    <slot>
      <component :is="item.icon" />
    </slot>
  </span>
</div>