ionic3自定义图标之多路径图标的使用

看这标题问题就来了，什么叫多路径图标呢？顾名思义就是当前svg的图标具有多个颜色或者由多个图层组成，如下：

image.png image.png

在ionic2+的项目中多路径图标在<ion-icon name="**"></ion-icon>中是无法正常展示的，我的解决办法是：
在非当前tabs页面时正常使用单路径的图标，而选中的tabs页面则将图标颜色设置成透明，将多路径的svg图标作为背景图片显示，如下代码：

<ion-tabs id="cardTab">
  <ion-tab [root]="tab1Root" tabTitle="我的名片" tabIcon="yes-my-cart1" class="first"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="量子分析" tabIcon="yes-analyze1"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="名片夹" tabIcon="yes-cardcase1"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="赠送朋友" tabIcon="yes-give1" tabBadge={{giveNum}}></ion-tab>
</ion-tabs>

.tabbar{
  a:first-child[aria-selected=true]{
    .tab-button-icon{
        background: url(../assets/images/cart1.svg) center center no-repeat !important;
        color: transparent !important;
    }
  }
  a:nth-child(2)[aria-selected=true]{
    .tab-button-icon{
        background: url(../assets/images/analyze1.svg) center center no-repeat !important;
        color: transparent !important;
    }
  }
  a:nth-child(3)[aria-selected=true]{
    .tab-button-icon{
        background: url(../assets/images/cardcase1.svg) center center no-repeat !important;
        color: transparent !important;
    }
  }
  a:nth-child(4)[aria-selected=true]{
    .tab-button-icon{
        background: url(../assets/images/give1.svg) center center no-repeat !important;
        color: transparent !important;
    }
  }
}

效果如下：

image.png image.png

html中的图标为自定义的图标，具体操作可查看ionic3 自定义图标及应用
妹子是前端新人，诸位大神如有更好的方法，欢迎交流指教哦。