Ionic2+ でカスタムアイコンをion-iconとかいろんなところで使えるようにする

Ionicでカスタムのアイコンを使いたいときに、画像だとion-iconとかtabのiconとかで使うのが面倒くさかったりしますね。

そこで、カスタムのion-iconを設定するときはこんな感じでやったのでメモ。

app.scss

ion-icon {
    &[class*="custom-icon-"] {
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="custom-icon-foo"] {
        mask-image: url(../assets/icon/foo.svg);
    }
    &[class*="custom-icon-bar"] {
        mask-image: url(../assets/icon/bar.svg);
    }
}

ちゃんとbackground: currentColorとしてあげることで、色の変更にも追従します。

名前空間を汚染するのがいやなので、class名はcustom-icon-xxxとあえてつけてます。場合によっては案件名などの接頭辞をつけてあげるのもいいと想います。

例えばタブだとこんな感じになります。

<ion-tab [root]="tab1Root" tabTitle="タブ1" tabIcon="custom-icon-foo"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="タブ2" tabIcon="custom-icon-bar"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="タブ3" tabIcon="alert"></ion-tab>

3つめはIoniconsデフォルトのalertアイコンですね。