最近在使用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的形式