vue3之element plus输入框图标

element plus输入框图标

第一步

npm
npm install @element-plus/icons-vue --save
yarn
yarn  add @element-plus/icons-vue

第二步

main.js引入(用app的实例分开写法)

import * as ElementPlusIcons from '@element-plus/icons-vue' //主要1
const app = createApp(App);
for (let iconName in ElementPlusIcons) {  //主要2
  app.component(iconName, ElementPlusIcons[iconName])
}

第三步

使用

<el-form-item>
          <el-input type="text" prefix-icon="UserFilled"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" prefix-icon="Lock"></el-input>
        </el-form-item>

!! == 用的图标直接去链接: Element Plus库用名字就行

效果