跪求vue中使用use标签引入svg的正确方法？svg-sprite-loader这个东西的作用是什么？

Question

我希望在项目中可以这样引入svg：

 <svg>
    <use :xlink:href="require('./xxx/xxx/xxx.svg')"></use>
 </svg>
  

但是这么做就会报一个地址的错误，然后我装了svg-sprite-loader，在webpack.base.conf.js中添加了

 {
    test: /\.svg$/,
    use: {
      loader: 'svg-sprite-loader',
      query: {
        name: '[name]_[hash:6]',
        prefixize: true
      }
    }
  },
  

但是发现依旧不行 （webpack的配置是vue-cli生成的）， 所以跪求大神叫我一下我应该这么做。我也很绝望。

Answer 1

先在js中引用，并加在data中

var svgUrl= require('./xxx/xxx/xxx.svg')
{
    data() {
        return {
            svgUrl
        }
    }
}

然后在模板中使用

 <svg>
    <use :xlink:href="svgUrl"></use>
 </svg>

Answer 2

打印出来是这个

Answer 3

你如果确实是按照原生的写法引入svg的化，可以专门维护一个svg symbol标签的vue组件，然后在入口处添加到页面上，比如main.vue中，只要把svg标签扔到了页面中就可以使用symbol 了，如果还嫌写 <svg> <use xxx> 麻烦的话可以把这个也写成一个动态组件，图在下面