学习vue-element-admin引入svg图标

一、vue2.x 中使用svg图标的相关配置

1.扩展svg-sprite-loader加载器

• 安装依赖：npm install svg-sprite-loader
• 在webpack.base.conf配置文件mudule.rules中加入扩展svg-sprite-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]')
    }
  },

2.创建SvgIcon组件

在src目录下的components中创建SvgIcon （./components/SvgIcon ）
源码如下：

<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=