在 Vue3 + Vite + Element Plus 的项目中使用自动引入的方式引入el-icon后，在el-input中通过prefix-icon属性引入icon显示失败的解决方法

问题描述

基于 Vue3 + Vite + Element Plus 的项目中使用自动引入的方式引入 el-icon 后，在 el-input 中通过 prefix-icon 属性引入icon后图标无法显示的问题。

<el-input type="email" placeholder="请输入邮箱" prefix-icon="Message" />

引发原因

Element Plus 自动引入图标的实现原理是从 iconify 中自动导入所需要的图标，而 iconify 是一个图标库，包含 Element Plus、Ant Design 等图标集，在具体使用时，语法为 <i-图标集英文缩写-图标名 />，不能直接使用 element plus 中支持的 <图标名 /> 语法。

解决方法

通过插槽引入图标

<el-input type="email" placeholder="请输入邮箱">
	<template #prefix>
    	<i-ep-message />
    </template>
</el-input>

【附录】Element Plus 自动引入 icon 的具体操作