elementPlus+vue3引入icon图标

安装包管理，推荐使用 yarn  npm包有时候会有包冲突，在项目的根目录下执行，在终端下

 
# Yarn
$ yarn add @element-plus/icons-vue

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

页面上按需引入需要的icon图标

 
<script>
// 按需引入需要的图标
import { User,Lock } from "@element-plus/icons-vue"
 
//引用图标需要通过setUP进行注册
export default {
  setup() {
    return {
     User
     Lock
    }
  },
}
script>

template模块中 :prefix-icon="User" 引入需要的图标    :surfix-icon="User" 在输入框末尾

<template>
          
          <el-form-item label="用户">
            <el-input :prefix-icon="User" v-model="input" placeholder="请输入用户名"> el-input>
          el-form-item>
          
          <el-form-item label="密码">
            <el-input :prefix-icon="User" v-model="input" type="password" placeholder="请输入密码" show-password>el-input>
      div>
    div>
template>