Vue Dynamic Xlink:href Attr

I want to pass icon name as props to a vue component and use it to render icon depends on that icon name. I did it by passing icon name to component and bind xlink:href to a data p

Solution 1:

It seems it works just fine...

const icon = Vue.component('Icon', {
  props: {
    icon: String
  },
  data: function () {
      return {
        href: `#${this.icon}`
      }
    },
  template: `
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use :xlink:href="href"></use>
  </svg>
  `
})

const ap = newVue({
  el: "#app",
  components: { icon },
  data() {
    return {
      icons: ['icon-8pt-star', 'icon-star']
    }
  },
  computed: {
    iconsInReverseOrder() {
      returnthis.icons.slice().reverse()
    }
  }
})

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><divid="app"><Iconv-for="(icon, index) in icons":icon="icon":key="icon+'1'"></Icon></div><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><symbolid="icon-8pt-star"viewBox="0 0 95 95"><pathclass="cls-1"d="M83.59,63.91,97.5,50,83.59,36.09V16.41H63.91L50,2.5,36.09,16.41H16.41V36.09L2.5,50,16.41,63.91V83.59H36.09L50,97.5,63.91,83.59H83.59Z"transform="translate(-2.5 -2.5)"/></symbol><symbolid="icon-star"viewBox="0 0 95 95"><polygonpoints="47.5 0 62.18 31.27 95 36.29 71.25 60.63 76.86 95 47.5 78.77 18.14 95 23.75 60.63 0 36.29 32.82 31.27 47.5 0"/></symbol></svg>