element-plus无法使用图标

最近在使用element-plus时遇见的问题：在使用element-ui时直接使用框架里的标签类名，图标就可以直接使用，在element-plus中却不能正常显示

源码：

<el-input placeholder="Pick a date">
   <template #suffix>
     <el-icon class="el-input__icon"><calendar /></el-icon>
   </template>
</el-input>

这是官方的代码，并且正常显示的效果如下：

 我的页面上显示的：

刚开始以为没有设置图标的大小，在检查了以后发现图标是有宽高的，并且控制台有警告，

 

 翻译为：无法解析组件：日历,如果这是本机自定义元素，请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。

参考官网以及各路大神的建议，实现图标显示的方案如下：

第一种：直接使用图标的方式：

①先安装（任意一种方式即可）

npm install @element-plus/icons-vue

yarn add @element-plus/icons-vue

 ②在需要使用的组件里引入这个图标，类似于引入组件的方式

第一步：引入

import {Select,Calendar} from '@element-plus/icons'

第二步：注册

components:{
    Select,Calendar
  }

第三步：标签实例化

<el-icon class="el-input__icon"><calendar /></el-icon>

或

<calendar />

第二种方式：以svg的形式