目录

实现效果

实现思路

实现效果

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

实现思路

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

<el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>Route</span>
        </span>
      </template>
      Route
    </el-tab-pane>

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

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

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

把代码粘贴到刚刚创建的vue文件中的<template>标签内部，

<template>
  <svg t="1700895167207" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
       p-id="4486" width="32" height="32">
    <path
        d="M841.813333 253.269333c-0.938667 5.888-2.005333 11.946667-3.2 18.176-40.576 209.749333-179.498667 282.24-356.864 282.24H391.424a43.946667 43.946667 0 0 0-43.349333 37.376l-46.250667 295.210667-13.098667 83.626667a23.338667 23.338667 0 0 0 22.784 26.88h160.213334a38.613333 38.613333 0 0 0 38.058666-32.682667l1.578667-8.192 30.165333-192.64 1.962667-10.538667a38.613333 38.613333 0 0 1 38.058667-32.768h23.936c155.221333 0 276.736-63.445333 312.234666-246.954666 14.848-76.672 7.168-140.714667-32.085333-185.728a153.301333 153.301333 0 0 0-43.861333-34.005334z"
        fill="#179BD7" p-id="4487"></path>
    <path
        d="M799.317333 236.202667a318.464 318.464 0 0 0-39.509333-8.789334 498.474667 498.474667 0 0 0-79.616-5.845333h-241.28a38.528 38.528 0 0 0-38.058667 32.768L349.525333 581.546667l-1.450666 9.514666a43.946667 43.946667 0 0 1 43.349333-37.376h90.325333c177.365333 0 316.288-72.533333 356.864-282.24 1.237333-6.229333 2.261333-12.288 3.157334-18.176a215.68 215.68 0 0 0-42.453334-17.066666z"
        fill="#222D65" p-id="4488"></path>
    <path
        d="M400.853333 254.293333a38.442667 38.442667 0 0 1 38.058667-32.725333h241.28c28.586667 0 55.296 1.877333 79.616 5.845333 16.512 2.602667 32.768 6.528 48.64 11.690667 11.946667 3.968 23.082667 8.704 33.365333 14.165333 12.074667-77.525333-0.085333-130.304-41.770666-178.133333C754.133333 22.528 671.274667 0 565.248 0H257.365333c-21.632 0-40.106667 15.872-43.477333 37.418667L85.674667 855.466667a26.752 26.752 0 0 0 5.973333 21.461333c5.034667 5.888 12.373333 9.301333 20.096 9.344h190.08l47.701333-304.725333 51.328-327.253334z"
        fill="#253B80" p-id="4489"></path>
  </svg>

</template>

然后在el-tab-pane内部替换icon即可

<el-tab-pane name="paypal">
              <template #label>
                <div class="custom-tabs-label">
                  <el-icon :size="26"><CustomIcon /></el-icon>
                  <span>Paypal</span>
                </div>
              </template>

            </el-tab-pane>

自定义ICON源码：类似element plus icon的自定义支付icon