title: Vue dynamic xlink:href attr
body: <p>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 property call href but it does not work! :/
  How can i do that?
  Here is component code:</p>
  <pre><code>&lt;template&gt;
    &lt;svg class=&quot;icon&quot;&gt;
        &lt;use :xlink:href=&quot;href&quot;&gt;&lt;/use&gt;
    &lt;/svg&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Icon',
    props: {
      icon: String
    },
    data: function () {
        return {
          href: `@sprite#icon-kb-${this.icon}`
        }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>and here is the component usage code:</p>
  <pre><code>&lt;Icon icon=&quot;down&quot;/&gt;
  </code></pre>