elementPlus使用icon图标不显示解决方法

近期在学习Vue时用elementUI时发现icon在页面上显示不出来，根据官方文档上的用法都显示不出来，听说在文档更新后好像不可以直接使用，需要引用。

正常按照文档标签使用（icon图标未显示）

 <el-input :prefix-icon="Key" v-model="**"style="width: 50%" placeholder="请输入验证码">
 <el-icon :size="20">
      <Key />
 </el-icon>
 </el-input>

解决方法

首先按照文档安装
1.

npm install @element-plus/icons-vue

       <el-input :prefix-icon="Key" v-model="**" placeholder="请输入验证码">
                 <template #prefix>
                    <el-icon class="el-input__icon"><Key /></el-icon>
                  </template>
       </el-input>

其中标签为icon为名称，可在文档中查看自己需要的icon进行更改。
3.

import  Key  from "@element-plus/icons";

将Key的icon引入后在components里加入

  components:{
    Key
  },

然后就可以啦~效果图附上…

当然可能不是唯一的方法，此为借鉴（根据使用版本而异）