在Ionic 2中添加自定义图标

Question

我正在使用Ionic 2来开发我的应用程序.我想在我的应用程序中使用我的自定义图标,就像我们使用离子2图标一样标签.例如:

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

我怎样才能实现这一目标？有没有推荐的方法来做到这一点？

Answer 1

这是我发现的最简单的方法,来自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>

这远比使用基于字体的方法复杂.只要您不添加数百个图标,您就可以使用此方法.但是,每个图像都作为单独的请求发送,与字体方法一样,所有图像都包含在一个文件中,因此效率会更高一些.

Answer 2

如果您想在离子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. 

Answer 3

使用当前的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

Answer 4

一直试图用icomoon的图标sass表实现Anjum Nawab shaikh的答案.

我已经能够使用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>