Ionic2 Tabs Custom icon

ionic2 Tabs Custom icon I. Preparation of resources vector Picture of tabs icon in SVG format
second, generate font style file

Open the Icomoon website to make font files.

iii. use of font files

Unzip the downloaded file and copy the Fonts folder into the Src/assest directory of the Ionic2 project. and name the Styles.css file in its directory as WECARE.SCSS (this name is the file name of your font), and then copy it to the src/assest/fonts directory of the Ionic2 project. Down we go to modify the Wecare.scss file.

Modify the reference address in the @font-face.

$font-path: '. /assets/fonts ';
@font-face {
Font-weight:normal;
Font-style:normal;
font-family: ' WeCare ';
Src:url (' #{$font-path}/wecare.eot?l80w4l ');
Src:url (' #{$font-path}/wecare.eot?l80w4l#iefix ') format (' Embedded-opentype '),
URL (' #{$font-path}/wecare.ttf?l80w4l ') format (' TrueType '),
URL (' #{$font-path}/wecare.woff?l80w4l ') format (' Woff '),
URL (' #{$font-path}/wecare.svg?l80w4l#wecare ') format (' SVG ');
}

To modify the common styles section of a font selector

Original code

    [class^= "ion-"], [class*= "ion-"] {/
     * use!important to prevent issues with browser extensions The change fonts */
  font-family: ' WeCare '!important;
     Speak:none;
     Font-style:normal;
     Font-weight:normal;
     Font-variant:normal;
     Text-transform:none;
     line-height:1;
     /* Better Font Rendering =========== */
     -webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;
}

After modification

    . wecare {
      text-transform:none;
      Font-weight:normal;
      Font-style:normal;
      Font-variant:normal;
      font-family: ' WeCare '!important;
      line-height:1;
      /* Better Font Rendering =========== */

      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      Speak:none;
    }

    . Ion-ios-smart-outline:before,. 
    ion-ios-smart:before,. 
    Ion-md-smart-outline:before, 
    . Ion-md-smart:before, 
    . Ion-ios-test-outline:before, 
    . Ion-ios-test:before, 
    . Ion-md-test-outline: Before, 
    . ion-md-test:before {
      @extend. wecare;
    }

Note: change a generic selector to a class, and then let the applied class inherit, because the use of [class^= "ion-"], [class*= "ion-"] to select will affect the Ionic2 of the icon library, which is also the wording of the Ionic2 font library.

A reference to a font

. ion-ios-smart-outline:before {
  content: ' \e904 ';
}

. Ion-ios-smart:before {
  content: ' \e905 ';
}

. Ion-md-smart-outline:before {
  content: ' \e904 ';
}

. Ion-md-smart:before {
  content: ' \e905 ';
}

. Ion-ios-test-outline:before {
  content: ' \e900 ';
}

. Ion-ios-test:before {
  content: ' \e901 ';
}

. Ion-md-test-outline:before {
  content: ' \e900 ';
}

. Ion-md-test:before {
  content: ' \e901 ';
}

Note: The reference icon in Ionic2 is referenced primarily by name, which automatically adds prefixes such as iOS or Android (. Ion-ios-smart.ion-md-smart) based on platform, so we have to write a class name for iOS and Android, Which is like. Ion-ios-test-outline This is the style when tab is not selected.

Import our Sass file into Src/theme/variables.scss, and then you can use it in tabs.

@import '. /assets/fonts/wecare ';

<ion-tabs>
  <ion-tab [root]= "Tab1root" tabtitle= "Now" tabicon= "test" ></ion-tab>
  < Ion-tab [root]= "Tab2root" tabtitle= "assessment" tabicon= "information-circle" ></ion-tab>
  <ion-tab [ root]= "Tab3root"  tabtitle= "Trends" tabicon= "Contacts" ></ion-tab>
  <ion-tab [root]= "Tab4root" tabtitle= "smart" tabicon= "smart" ></ion-tab>
  <ion-tab [root]= "Tab5root" tabtitle= "Settings" Tabicon = "Contacts" ></ion-tab>
</ion-tabs>

four, solve the Android icon can only use a single icon problem

In Ionic2, the tab icon for Android is checked and unchecked only one SVG picture is used, except for the color difference. If we want to select and uncheck using different icons as in iOS, we can't do that. The demand of our project is like this, I had to go to see Ionic2 about tabs and tab of the source code, find a solution to the problem. We should know that in iOS it is controlled by the-outline suffix to show the unselected icon. At first I looked at the source code of Tabs and tab, and did not find the part about this problem. Finally, in the source code of the icon found in the section on this issue.

    if (Iconmode = = = ' iOS ' &&!this._isactive && name.indexof (' logo-') < 0 && Name.indexof ('-outli Ne ') < 0) {
          name + = '-outline ';
    }

It is to determine whether iOS and!this._isactive are added-outline suffixes to the icon's name. But we can not change the source, because if the upgrade will overwrite later.
but despair, in the tab API, provides a method that is called when selected, and we use this method to change the icon. Here is the code

<ion-tabs> <ion-tab [root]= "Tab1root" (ionselect) = "Change (0)" tabtitle= "Now" Tabicon= "{{test[0]}}" ></ion-tab> <ion-tab [root]= "Tab2root" (ionselect) = "Change (1)" tabtitle= " Assessment "tabicon=" information-circle "></ion-tab> <ion-tab [root]=" Tab3root "(ionselect) =" Change (2) " Tabtitle= "Trends" tabicon= "Contacts" ></ion-tab> <ion-tab [root]= "Tab4root" (ionselect) = "Change (3)" Tabtitle= "Smart" tabicon= "{{test[3]}" ></ion-tab> <ion-tab [root]= "Tab5root" (ionselect) = "Change (4)" Tabtitle= "Settings" tabicon= "Contacts" ></ion-tab> </ion-tabs> 

test:array<string> = ["Test", "" "," "", "smart", ""];
Change (a:number) {
    if (this.platform.is ("Android")) {-(let
      i = 0; i < 5; i++) {
        if (i = = a) {
          thi S.test[i] = This.test[i].split ("-") [0];
        } else {
          This.test[i] = This.test[i].split ("-") [0] + "-outline";}}}

Five, the most later look at the effect