在 Ionic 2 中添加自定义图标

Question

我正在使用 Ionic 2 开发我的应用程序。我想在我的应用程序中使用我的自定义图标，就像我们使用标签使用 ionic 2 图标一样。例如：

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

我怎样才能做到这一点？有什么推荐的方法吗？

Answer 1

开始之前：确保您拥有所需的每个 svg 文件。

现在就到这里：http://fontello.com/

该工具将生成您的图标字体和所需的 CSS。它非常直观，只需使用它、下载字体并将其复制到您的 www 文件夹中的任何位置，但保持相同的文件结构。最后，只需将 CSS 文件集成到 index.html 文件中即可！

希望能解决您的问题！ ;-)

Answer 2

根据离子团队：

你好！现在它仅限于使用 ionicons，因为在它下面呈现一个 ion-icon，这就是处理平台差异。您可以打开一个问题，我们可以在那里讨论添加此功能

你可以在这里看到所有答案：

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 文件上创建 class。

Answer 3

添加我在 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>

Answer 4

如果你想在 ionic 2+ 中使用自定义字体，你可以通过以下方式实现。

步骤 01：

Have/create 使用 XD.
使用很棒的在线工具 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

对于离子 3.1.2

您需要在 /src/theme/variables.scss 文件中添加 @import "ionicons";，这将修复以下错误

"[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 5

我认为 GerritErpenstein 的这个循序渐进的步骤非常直观，对我来说效果很好。我的 Ionic 版本是 2.2.2。从字面上看，你用这样一句话就搞定了：

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

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

Answer 6

一直在尝试使用来自 icomoon 的图标 sass sheet 在顶部实施 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>

Answer 7

在当前的 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 8

这是我从 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 9

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>

Answer 10

如果离子方式不适合您，您可以使用 angular 方式。使用这个包：https://www.npmjs.com/package/angular-svg-icon。

离子使用示例代码：

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

Answer 11

以下是使用 ion-icon 显示外部 svg 图标的推荐方式：

To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.

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

参考：https://ionic.io/ionicons/usage

在 Ionic 2 中添加自定义图标

Add Custom Icon in Ionic 2

ionic-framework

ionic2

[更新] 2017 年 11 月 30 日