如何使用Element Plus 提供的Icon图标库

---

前言

用vue3开发的时候，使用element-plus UI组件库的时候，发现不能像之前vue2时候使用的那么方便了，需要单独引入和使用，且使用的方式发生了很大的变化，这篇文章将详细的为你说明element-plus icon组件库的使用方法。

一、安装

第一种，使用包管理工具：

$ npm install @element-plus/icons-vue

$ yarn add @element-plus/icons-vue

$ pnpm install @element-plus/icons-vue

第二种，使用vue-vli 脚手架使用可视化面板进行添加：

二、使用

1.引入需要的图标

后台有一个需要对用户进行用户管理的功能，为美化页面，在菜单栏需要引入图标
代码如下（template部分）：

<el-menu :router="true" default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse"
   @open="handleOpen"@close="handleClose">
       <el-submenu index="1">
          <template #title>
             <el-icon>
                <UserFilled />// 添加一个代表用户的图标
             </el-icon>
             <span>用户管理</span>
          </template>
          <el-menu-item index="/users"> 用户列表 </el-menu-item>
       </el-submenu>
</el-menu>

代码如下（script部分）：

<script>
  import {
    UserFilled
  } from '@element-plus/icons-vue'// 使用的时候需要单独引入这个图标从库里
  export default {
    components: {
      UserFilled// 单独声明这个
    },
    setup() {
    // 后面都省略了

如果按照官网中提供的方法，页面并没有成功加载出图标：

所以还需要再声明一下（哎，迭代迭的越来越花里胡哨）

2.页面效果

就成功引入到我们的页面上了！
反观vue2使用element UI组件库的时候好像使用并没有那么复杂并没有，不管是全局导入或者是按需导入（好像不需要单独引入）都可以直接拿直接用就挺方便的
就比如说这样，按钮里直接加上就可以使用了
<el-button type="primary" icon="el-icon-search">搜索</el-button>

3.还有一个奇怪的问题

实际在vue3开发中，像input框上加图标的时候，使用之前的那种用法也是可以的（且在HBuilderX中还存在提示），这种可以参考着element UI组件库看看，而element-plus ui组件库的图标不能直接进行使用（需要先导入整个包，再单独进行使用），这就是我觉得很奇怪的一个点。

总结

初尝试element-plus ui组件库的小伙伴可以看看我其他的文章，这都是我这段时间踩的坑
Vue如何实现不同登录方式的切换（账号密码登录、邮箱验证登录等）
关于element-plus 中侧边菜单栏的使用中的一个不经意的小问题（避坑）