vue引入本地svg文件

Question

设计给了一堆svg文件 需要循环展示出来 我用了svg-sprite-loader插件但是图片出不来
svg组件(Icon.vue)
<template>
<svg :class="svgClass" aria-hidden="true">

<use :xlink:href="iconName"></use>

</svg>
</template>

<script>
export default {
name: 'svg-icon',
props: {

name: {
  type: String,
  required: true
},
className: {
  type: String
}

},
computed: {

iconName () {
  return `#icon-${this.name}`
},
svgClass () {
  if (this.className) {
    return 'svg-icon ' + this.className
  } else {
    return 'svg-icon'
  }
}

}
}
</script>

<style>
.svg-icon {

  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;

}
</style>
在main.js引入了这个文件
import Vue from 'vue'
import SvgIcon from '@/components/Icon.vue'

Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /.svg$/)
requireAll(req)
使用的时候
<li v-for="(item,idx) in types" :key="idx">

    <icon name="husbandry"/>
    {{item.text}}

</li>
控制显示这个样子 图片根本没出来

Answer 1

楼主你用法不对啊，你全局注册的 component 名字是 svg-icon，不是 icon。把代码改下试试：

<li v-for="(item,idx) in types" :key="idx">
    // name 是根据你的 types 定义的，我这里暂且为 name 吧，是一个动态值，这个其实就是你引用的 svg 的 name
    <svg-icon :name="item.name"/>
    {{item.text}}
</li>