vue3.x结合element-plus如何使用icon图标

太过爱你忘了你带给我的痛 2023-09-27 12:41 112阅读 0赞

基于 Vue 3的Element Plus如何使用icon图标

首先注意Element Plus版本：官网如图所示，

![bb782152fe9549f6802dace541b543ac.png][]

基于vue3的具体如何使用：

参考官网文档：

1.首先选择一种方式安装

![9588120a5a5748238fc1355ec35aef90.png][]

2.然后全局注册图标

![36ca15f2fa474115abbdf483da55d157.png][]

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

展示效果如下：

![c1712647f7f24895aa34eb174fb98897.png][]

使用方式2：其他文字前直接使用

![23fa33b221f540de85990dd1fa32ab8f.png][]

代码如下：

<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][Vue 3 UI _ _ Element Plus]，点击即可复制；

![65b3ee6d71ab480a9fb514b9ef789915.png][]

此外图标还可以设置属性，如颜色大小等；

在el-icon标签中加入即可。

[bb782152fe9549f6802dace541b543ac.png]: https://img-blog.csdnimg.cn/bb782152fe9549f6802dace541b543ac.png
[9588120a5a5748238fc1355ec35aef90.png]: https://img-blog.csdnimg.cn/9588120a5a5748238fc1355ec35aef90.png
[36ca15f2fa474115abbdf483da55d157.png]: https://img-blog.csdnimg.cn/36ca15f2fa474115abbdf483da55d157.png
[c1712647f7f24895aa34eb174fb98897.png]: https://img-blog.csdnimg.cn/c1712647f7f24895aa34eb174fb98897.png
[23fa33b221f540de85990dd1fa32ab8f.png]: https://img-blog.csdnimg.cn/23fa33b221f540de85990dd1fa32ab8f.png
[Vue 3 UI _ _ Element Plus]: https://element-plus.gitee.io/zh-CN/
[65b3ee6d71ab480a9fb514b9ef789915.png]: https://img-blog.csdnimg.cn/65b3ee6d71ab480a9fb514b9ef789915.png