Ionic 3 自定义 tabs 菜单图标

ionic 的 tabs 组件默认图标更换方式可以通过自定义图标样式来替换。自定义图标可以是图标字体库，也可以是png图标等。

可以在 tabs.scss 文件或者全局 app.scss 文件定义都行。下边是在 app.scss 中定义代码：

.ion-tab-icon-base {
    width: 32px !important;
    height: 32px !important;
    padding: 4px 4px 2px;
}
.ion-tab-icon-md-base {
    min-width: 0 !important;
    height: 32px;
}
$tabImageName: 'home' 'about' 'contact';
@for $i from 1 to 4 {
    //for ios
    .ion-ios-tab-#{nth($tabImageName, $i)} {
        @extend .ion-tab-icon-base;
        content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");
    }
    .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
        @extend .ion-tab-icon-base;
        content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_off.png");
    }

    // for android
    .tabs-md .tab-button[aria-selected=true] {
        .ion-md-tab-#{nth($tabImageName, $i)} {
            @extend .ion-tab-icon-md-base;
            content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");
        }
    }
    .tabs-md .tab-button[aria-selected=false] {
        .ion-md-tab-#{nth($tabImageName, $i)} {
            @extend .ion-tab-icon-md-base;
            content: url("../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_off.png");
        }
    }
}
.ion-ios-tab-task,.ion-ios-tab-task-outline,.ion-ios-tab-master,.ion-ios-tab-master-outline{
    width: 30px !important;
    height: 32px !important;
}

使用 scss 的语法，定义数组 $tabImageName: 'home' 'about' 'contact';，然后通过循环 #{nth($tabImageName, $i)} 取出每个元素，定义每个图标的样式，这个就是 scss 预编译样式的好处，省去重复的内容。

从样式代码可以看出，定义了两份代码，一份是 ios 的 ion-ios- 前缀，一份是 android 的 ion-md- 与 .tabs-md 前缀，这个是 ionic 对不同平台有不同的样式处理，如果了解一看就明白了。-outline 为 ios 未选中样式，[aria-selected=false] 为 android 未选中样式。

接着修改 tabs.html 文件，修改 tabIcon 为样式表中定义的图标即可。（上面样式图标统一添加了前缀 tab-，为了和自带图标区分开来）

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="tab-home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="tab-about"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="tab-contact"></ion-tab>
</ion-tabs>

图标目录结构如下：