?基于 Vue 3的Element Plus如何使用icon圖標(biāo)
首先注意Element Plus版本：官網(wǎng)如圖所示，
?基于vue3的具體如何使用：
參考官網(wǎng)文檔：
1.首先選擇一種方式安裝
?2.然后全局注冊圖標(biāo)
在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：輸入框中使用
輸入框前和后引入圖標(biāo)，在標(biāo)簽屬性中加入
前 prefix-icon="圖標(biāo)名" 后 suffix-icon="圖標(biāo)名"?例如：
<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(圖標(biāo)名) /></el-icon>
系統(tǒng)管理
</template>
<el-menu-item index="user">用戶管理</el-menu-item>?圖標(biāo)名均可在官網(wǎng)文檔中查詢到：一個 Vue 3 UI 框架 | Element Plus，點擊即可復(fù)制；
?此外圖標(biāo)還可以設(shè)置屬性，如顏色大小等；文章來源：http://www.zghlxwxcb.cn/news/detail-402164.html
在el-icon標(biāo)簽中加入即可。?文章來源地址http://www.zghlxwxcb.cn/news/detail-402164.html
到了這里，關(guān)于vue3.x結(jié)合element-plus如何使用icon圖標(biāo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[Vue3 博物館管理系統(tǒng)] 使用Vue3、Element-plus tabs組件構(gòu)建選項卡功能](https://imgs.yssmx.com/Uploads/2024/02/703298-1.png)
