xlink：href的Nuxtjs Svg绑定不起作用

Question

我无法在nuxtjs（Vue）中将svg xlink：href用作动态属性。我正尝试像下面

一样使用它

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

我如何使其工作？

Answer 1

Nuxt不会在任何对象中处理任何字符串值以检查它是否是链接，请使用require查找SVG的公共路径

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

另外，请看一下SVG Sprite Module，该模块创建了一种使用SVG图标的简洁方法

Answer 2

在NuxtJS 2上，我必须执行以下操作：

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

在没有~的情况下不起作用。