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

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

image.png

image.png

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

  
  
  
  


.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 自定义图标及应用
妹子是前端新人，诸位大神如有更好的方法，欢迎交流指教哦。