vue 封装svg-icon

1、首先安装svg-sprite-loader

2、配置webpack.base.conf.js

{
          test: /\.svg$/,
          loader: 'svg-sprite-loader',
          include: [resolve('src/icons')],
          options: {
              symbolId: 'icon-[name]'
          }
      },

注意我画红框的地方，这2个地方必须指定svg图标的位置，不然启动的时候会报错，

 3、创建svg.vue组件

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

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

<style scoped lang="stylus">
  .svg-icon {
    width 1.1em
    height 1.1em
    vertical-align -.2em
    fill currentColor
    overflow hidden
  }
</style>

4、将icons这个包放在src目录下

编写index.js

import Vue from 'vue'
import IconSvg from '@/components/svg-icon/svg.vue'

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

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

5、main.js中引入

6、使用