vue中使用svg

在 src/icons/svg 文件夹下存放svg文件

//  src/icons/index.js
import Vue from 'vue'
import SvgIcon from '../compone
// 注册到全局
Vue.component('svg-icon', SvgIc
const requireAll = requireConte
const req = require.context('./
requireAll(req)

// main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = fals
import '@/icons'
/* eslint-disable no-new */
new Vue({
 el: '#app',
 components: { App },
 template: '<App/>'
})

//svg.vue
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

使用demo

<template>
    <div class="svg-demo">

    <h2>svg</h2>
        <ul>
            <li v-for="(name, index) in svgName" :key="index">
                <svg-icon :iconClass="name"></svg-icon>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'svgDemo',
  data () {
    return {
      svgName: ['user', 'password', 'email']
    }
  }
}
</script>

<style  >
    .svg-demo{
        text-align: center;
      
    }

         .svg-demo ul,   .svg-demo li{
            list-style: none;
            padding: 0;
            margin: 0;
            line-height: 2;
        }
</style>