使用svg图标

vue使用svg图标，

一、在src下assets新建icons，

二、icons新建svg文件夹，index.js文件，如图

三、svg文件夹存放自己下载的图标

四、index.js文件内容

import Vue from 'vue'

import SvgIcon from '../../components/SvgIcon'// svg component

// register globally

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

const req = require.context('./svg', false, /\.svg$/)

const requireAll = requireContext => requireContext.keys().map(requireContext)

requireAll(req)

五、在components新建SvgIcon ，如图

 六、SvgIcon   index.vue内容

<template>

  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />

  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">

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

  </svg>

</template>

<script>

import { isExternal } from '../../utils/validate'

export default {

  name: 'SvgIcon',

  props: {

    iconClass: {

      type: String,

      required: true

    },

    className: {

      type: String,

      default: ''

    }

  },

  computed: {

    isExternal() {

      return isExternal(this.iconClass)

    },

    iconName() {

      return `#icon-${this.iconClass}`

    },

    svgClass() {

      if (this.className) {

        return 'svg-icon ' + this.className

      } else {

        return 'svg-icon'

      }

    },

    styleExternalIcon() {

      return {

        mask: `url(${this.iconClass}) no-repeat 50% 50%`,

        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`

      }

    }

  }

}

</script>

<style scoped>

.svg-icon {

  width: 1em;

  height: 1em;

  vertical-align: -0.15em;

  fill: currentColor;

  overflow: hidden;

}

.svg-external-icon {

  background-color: currentColor;

  mask-size: cover!important;

  display: inline-block;

}

</style>

七、找到build文件夹下的webpack.base.conf.js里的module：{}，找到 loader: 'url-loader',注释，或删除，因，你新添加的对象和创建项目时创建的有冲突，，如图

 八。添加两个对象，

 {

        test: /\.svg$/,

        loader: 'svg-sprite-loader',

        include: [resolve('src/assets/icons')],

        options: {

          symbolId: 'icon-[name]'

        }

      },

      {

        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

        loader: 'url-loader',

        exclude: [resolve('src/assets/icons')],

        options: {

          limit: 10000,

          name: utils.assetsPath('img/[name].[hash:7].[ext]')

        }

      }

九、在main.js引入 

import './assets/icons/index' // icon