web-dev-qa-db-ja.com

Ionic 2にカスタムアイコンを追加

アプリの開発にIonic 2を使用しています。タグを使用してionic 2個のアイコンを使用するように、アプリでカスタムアイコンを使用します。例えば：

<ion-icon name="my-custom-icon"></ion-icon>

どうすればこれを達成できますか？これを行うための推奨される方法はありますか？

ionic-frameworkionic2
55
Prerak Tiwari

ionic 2+でカスタムフォントを使用する場合は、次の方法で使用できます。

ステップ01：

  • XD などのツールを使用して、カスタムフォントSVGファイルを作成/作成します。
  • 素晴らしいオンラインツール https://icomoon.io にアクセスして、SVGファイルからフォントアイコンを生成します。これは無料のツールであり、非常に優れています。しばらく使用しています。
  • カスタムフォントファイルをダウンロードします。
  • ファイルは次のようになります。
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

上記のコードを次のように置き換えます。

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
  @extend .ion;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

ステップ02：

  • SASS @mixingを反復作業に使用できます
  @mixin makeIcon($arg, $val) {
  .ion-ios-#{$arg}:before ,
  .ion-ios-#{$arg}-circle:before ,
  .ion-ios-#{$arg}-circle-outline:before ,
  .ion-ios-#{$arg}-outline:before ,
  .ion-md-#{$arg}:before ,
  .ion-md-#{$arg}-circle:before ,
  .ion-md-#{$arg}-circle-outline:before ,
  .ion-md-#{$arg}-outline:before  {
    content: $val;
    font-size: 26px;
  }
}

次のように、sassファイルでsassミキシングを使用できます。

@include makeIcon(icon-new-home, '\e911')

ステップ03

のように使用します

<ion-tabs class="footer-tabs" [selectedIndex]="mySelectedIndex">
    <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="icon-new-home"></ion-tab>
 </ion-tabs>

Androidリップル効果もサポートしています。

[更新] 2017年11月30日

@ionic/app-scripts : 3.1.2
Ionic Framework    : ionic-angular 3.9.2

Ionic 3.1.2の場合

以下のエラーを修正する@import "ionicons";ファイル内に/src/theme/variables.scssを追加する必要があります

"[class^="icon-"]" failed to @extend ".ion". The selector ".ion" was not found. Use "@extend .ion !optional" 
        if the extend should be able to fail.
68
Anjum....

これは https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-のフォーラムから見つけた最も簡単な方法ですfile/46131/36 。

app.scssファイルに、次のコードを追加します。

ion-icon {
    &[class*="appname-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="appname-customicon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="appname-customicon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
    &[class*="appname-customicon3"] {
        mask-image: url(../assets/img/customicon3.svg);
    }
}

次に、テンプレートで、次のHTMLを使用してアイコンを作成できます。

<ion-icon name="appname-customicon"></ion-icon>

これは、フォントベースの方法を使用するよりもはるかに簡単です。何百ものアイコンを追加しない限り、この方法で問題ありません。ただし、各画像は個別の要求として送信されます。フォントメソッドと同様に、すべての画像が1つのファイルに含まれているため、もう少し効率的です。

69
adjwilli

現在のIonic 3.3.0では、Anjumのソリューションを使用できますが、変更する必要があります

@import "ionic.ionicons";

に

@import "ionicons";

src/theme/variables.scssファイル内。

このソリューションは次の場所で見つかりました。

https://github.com/yannbf/ionicCustomIconsSample/blob/master/src/theme/variables.scss

9
Wolf

Anjum Nawab shaikh answer icomoonのアイコンsassシートを上に実装しようとしています。

バージョン2.2.2で動作するようになりました。

プロジェクトのwww/fontsにicomoonファイルを追加しました：

icomoon.svg
icomoon.ttf
icomoon.woff
icomoon.eot
icomoon.scss

Icomoon.scssに次のscssを追加しました。

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?tclihz');
  src:  url('../fonts/icomoon.eot?tclihz#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tclihz') format('truetype'),
    url('../fonts/icomoon.woff?tclihz') format('woff'),
    url('../fonts/icomoon.svg?tclihz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{

/* Didn't feel the need to @extend since this just adds to already existing .ion
code which I believe is replaced to just ion-icon tag selector in 
www/assets/fonts/ionicons.scss */

  font-family: "Ionicons", "icomoon" !important; //So just add this
}

//Mixin
@mixin makeIcon($arg, $val) {
  .ion-ios-#{$arg}:before ,
  .ion-ios-#{$arg}-circle:before ,
  .ion-ios-#{$arg}-circle-outline:before ,
  .ion-ios-#{$arg}-outline:before ,
  .ion-md-#{$arg}:before ,
  .ion-md-#{$arg}-circle:before ,
  .ion-md-#{$arg}-circle-outline:before ,
  .ion-md-#{$arg}-outline:before  {
    //important to overwrite ionic icons with your own icons
    content: $val !important; 
    font-size: 26px;
  }
}


//Adding Icons
@include makeIcon(email, '\e900');
...

次に、variables.scssにインポートしました

@import "../www/fonts/icomoon";

これで、これをhtmlテンプレートに追加できます。

<ion-icon name="email"></ion-icon>
6
Jonathan002

開始前：必要なすべてのsvgファイルがあることを確認してください。

ここに移動してください： http://fontello.com/

このツールは、アイコンフォントと必要なCSSを生成します。それはかなり直感的で、使用して、ダウンロードして、wwwフォルダーのどこにでもフォントをコピーしますが、同じファイル構造を保持します。終了するには、CSSファイルをindex.htmlファイルに統合するだけで完了です。

問題が解決することを願っています！ ;-)

4
Guillaume Le Mière

ionicチームによると：

やあ！現時点では、イオンアイコンの使用が制限されています。なぜなら、その下ではイオンアイコンをレンダリングし、プラットフォームの違いを処理しているからです。問題を開いて、そこにこの機能を追加することを議論することができます

ここですべての答えを見ることができます：

https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/16

私もこれを見つけます：

https://www.npmjs.com/package/ionic2-custom-icons 、

しかし、賢い解決策ではないようです（Ionicチームの解決策を待つことを好みます）。

これに最適なシナリオは、scssファイルにクラスを作成するという古い方法を使用することです。

4
Goldbones

Scssファイルで使用するカスタムアイコンを追加するには：

.ion-ios-MYICON:before,
.ion-ios-MYICON-circle:before,
.ion-ios-MYICON-circle-outline:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-circle:before,
.ion-md-MYICON-circle-outline:before,
.ion-md-MYICON-outline:before {
  @extend .ion;
}

.ion-ios-MYICON:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-outline:before {
  content: 'your-custom-image';
}

次に、HTMLコードで：

<ion-icon name="MYICON"></ion-icon>
3
rpayanm

GerritErpensteinによるこの段階的な手順は非常に直感的で、私にとってはかなりうまくいくと思います。私のIonicバージョンは2.2.2です。文字通り、あなたはこのような文を使用し、それは完了です：

<custom-icon set="star" name="iconostar"></custom-icon>

https://github.com/GerritErpenstein/ionic2-custom-icons

1
Giannkas
Create Icon
ion-icon {
        &[class*="custom-"] {
          mask-size: contain;
          mask-position: 50% 50%;
          mask-repeat: no-repeat;
          background: currentColor;
          width: 0.8em;
          height: 0.8em;
        }

        &[class*="custom-rupee"] {
          color: yellow;
          mask-image: url(../../assets/Images/rupee.svg);
        }
        &[class*="custom-ballon"] {
          mask-image: url(../../assets/ballon.svg);
        }
        &[class*="custom-mouse"] {
          mask-image: url(../../assets/mouse.svg);
        }

      }
 And to use them
&lt;ion-icon name="custom-rupee"></ion-icon>
&lt;ion-icon name="custom-mouse"></ion-icon>
&lt;ion-icon name="custom-ballon"></ion-icon>
0
kuldeep kumar

ionic wayが機能しない場合、angular wayを使用できます。このパッケージを使用してください： https://www.npmjs.com/package/angular-svg-icon 。

ionic使用法のサンプルコード：

<svg-icon src="/assets/icons/activity.svg"></svg-icon>

0
sanuj