基于 Vue 3的Element Plus如何使用icon图标
首先注意Element Plus版本：官网如图所示，
基于vue3的具体如何使用：
参考官网文档：
1.首先选择一种方式安装
2.然后全局注册图标
在main.js或main.ts文件中引入：
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}3.然后就可以使用了，具体实例如下：
使用方式1：输入框中使用
输入框前和后引入图标，在标签属性中加入
前 prefix-icon="图标名" 后 suffix-icon="图标名"例如：
<el-input prefix-icon="User" v-model="form.username" placeholder="用户名"></el-input>展示效果如下：
使用方式2：其他文字前直接使用
代码如下：
<el-sub-menu index="1">
<template #title>
<el-icon size="20px"><User(图标名) /></el-icon>
系统管理
</template>
<el-menu-item index="user">用户管理</el-menu-item>图标名均可在官网文档中查询到：一个 Vue 3 UI 框架 | Element Plus，点击即可复制；
此外图标还可以设置属性，如颜色大小等；文章来源：https://www.toymoban.com/news/detail-402164.html
在el-icon标签中加入即可。 文章来源地址https://www.toymoban.com/news/detail-402164.html
到了这里，关于vue3.x结合element-plus如何使用icon图标的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[Vue3 博物馆管理系统] 使用Vue3、Element-plus tabs组件构建选项卡功能](https://imgs.yssmx.com/Uploads/2024/02/703298-1.png)
