VUE3+element plus在el-tab-pane中增加自定义图标

目录

实现效果

实现思路


实现效果

例如提供多种付款方式,使用el-tabs标签进行内容切换,标签头加上图标体验更好

实现思路

element plus官网上提供了以下在el-tab-pane增加icon的样例,其中el-icon就是一个svg的图标。只要使用自己的图标替换这里的图标即可


      
      Route
    

element plus官方提供的图标很少,阿里巴巴的免费图标库提供了很多选择

在VUE3项目的src/assets目录下新建一个icon目录,在其中新建一个vue文件,取个名字CustomIcon

在阿里的免费图标库中找到中意的图标,点击右下角的“复制svg代码”

VUE3+element plus在el-tab-pane中增加自定义图标_第1张图片

把代码粘贴到刚刚创建的vue文件中的