Nuxtjs Svg binding of xlink:href doesn't work

1
votes

I am not able to get the svg xlink:href work as a dynamic property in Nuxtjs(Vue). I am trying to use it like below 

 <svg class="icon phone-icon">
        <use
          v-bind="{ 'xlink:href': '../assets/sprite.svg#icon-download' }"
        ></use>
      </svg>

How do I make it work?

2
vue.jssvgnuxt.js

2 Answers

3
votes

Nuxt does not process any string value in any object to check if it is a link or not, Use require to find the public path of your SVG

<svg class="icon phone-icon">
    <use
        v-bind="{ 'xlink:href': require('../assets/sprite.svg') + '#icon-download' }"
    ></use>
</svg>

Also, take a look at SVG Sprite Module, this module creates a clean way to work with SVG icons

1
votes

On NuxtJS 2 I had to do the following:

<svg class="icon">
    <use v-bind="{ 'xlink:href': require('~/assets/sprite.svg') + '#icon-download' }"></use>
</svg>

without ~ it did not work.