ionic tabs图标更换

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/houjunkang363/article/details/82963622

1.定义图标

在theme目录新建一个icons.scss，专门用来定义自定义图标。

.ion-ios-tab1-outline:before { content: url("../assets/imgs/tab1.svg");}  默认图片

.ion-ios-tab1:before { content: url("../assets/imgs/tab1_press.svg");}   按下图片

我用的是svg图，用png图也可以，经测试25px*25px适配最好

2.导入icons.scss

在variables.scss中导入icons.scss

@import "icons.scss";

3.使用

<ion-tab tabIcon="ios-tab1"/>

图标风格我用的是ios风格(iconMode: 'ios'),md风格同理