1、打开终端，输入

npm install @element-plus/icons-vue

2、新建src/plugins/icons.ts文件，进行统一注册，内容如下：

3、新建src/plugins/index.ts文件，引入刚建的icons.ts文件

4、在main.js文件中引入并使用

5、在任意页面中使用

<template>
  <div>
    <el-icon><Lock /></el-icon>
  </div>
</template>

运行项目，得到如下图标

6、由于我们每次写入图标都得用2个标签，所以在这里进行优化，新建文件夹src/utils/toLine.ts，把把驼峰转化成横杠连接

//把驼峰转化成-连接
export const toLine = (value: string) =>{
  return value.replace(/(A-Z)g/,'-$1').toLocaleLowerCase()
}

7、在src/plugins/icons.ts文件中做修改，内容如下

import { App } from "vue";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import {toLine} from '@/utils/toLine'


//注册所有图标
export function setupElIcons(app: App<Element>){
  for(let i in ElementPlusIconsVue){
    app.component(`el-icon-${toLine(i)}`,(ElementPlusIconsVue as any)[i])
  }
}

8、在index.html文件中设置图标大小

    svg{
      width: 1rem;
      height: 1rem;
    }

9、在任意页面中引用

<el-icon-Expand></el-icon-Expand>

效果如图