ElementUI图标少，引入阿里矢量图标

ElementUI 是一个基于 Vue 2.0 的组件库，它内置的图标是有限的。如果你需要使用更多的图标，可以引入阿里矢量图标库（Icon Font）。以下是如何将阿里矢量图标库引入到你的 Vue 项目中的步骤：

1. 首先，你需要在你的项目中安装 svg-sprite-loader：

npm install svg-sprite-loader --save-dev

2. 在 vue.config.js 文件中配置 loader：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(/node_modules/)
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(/node_modules\/iview\//)
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

3. 在你的组件中使用图标：

<template>
  <div>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-xxx"></use>
    </svg>
  </div>
</template>
 
<script>
export default {
  name: 'MyIcon'
}
</script>
 
<style>
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

在上面的代码中，将 #icon-xxx 替换为你想使用的图标的 ID。你可以在阿里矢量图标库网站上找到每个图标对应的 ID。

确保在 main.js 或相应的入口文件中引入了阿里矢量图标库的 CSS 文件，并且在 index.html 中添加了对应的 <script> 标签。

// main.js
import '../path/to/iconfont.css'

<!-- index.html -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_xxxxxx.css">
<script src="//at.alicdn.com/t/font_xxxxxx.js"></script>

请将 font_xxxxxx.css 和 font_xxxxxx.js 替换为你在阿里矢量图标库网站上下载的文件。