element-plus无法使用图标

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

源码:


   

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

 我的页面上显示的:

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

 

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

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

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

①先安装(任意一种方式即可)

npm install @element-plus/icons-vue
yarn add @element-plus/icons-vue

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

第一步:引入

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

第二步:注册

components:{
    Select,Calendar
  }

第三步:标签实例化

第二种方式:以svg的形式

element-plus无法使用图标_第1张图片

 

你可能感兴趣的:(elementui,vue.js,前端,javascript)