How to store a component in an array in vue?

Question

Vue.js

Good afternoon.

I'm getting svg icons for social networks as a component, and I want to store them in an array.

<template>
  <ul class="social-links">
    <li v-for="item in socials" :key="item.id">
      <g-link :to="item.url">{{ item.icon }}</g-link>
    </li>
  </ul>
</template>

<script>
import Facebook from '~/assets/svg/facebook.svg';
import Twitter from '~/assets/svg/twitter.svg';
import Instagram from '~/assets/svg/instagram.svg';

export default {
  data () {
    return {
      socials: [
        {
          id: 1,
          icon: '<Facebook/>',
          url: "https://www.facebook.com",
        },
        {
          id: 2,
          icon: '<Twitter/>',
          url: "https://www.twitter.com",
        },
        {
          id: 3,
          icon: '<Instagram/>',
          url: "https://www.instagram.com",
        }
      ]
    }
  },
  components: {
    Facebook,
    Twitter,
    Instagram
  }
}
</script>

<style lang="scss">

</style>

In react this is possible, but in vue this is a problem.

Answer 1

Where did you get the idea that these are components? Most likely there is either svg code or svg file URL.
Therefore, all you need is:

socials: [
        {
          id: 1,
          icon: Facebook,
          url: "https://www.facebook.com",
        },
        {
          id: 2,
          icon: Twitter,
          url: "https://www.twitter.com",
        },
        {
          id: 3,
          icon: Instagram,
          url: "https://www.instagram.com",
        }
      ]

Answer 2

Everything worked. Thanks for support.
The problem was that the icons did not have a height and width, I corrected them and now they are displayed normally.