添加自定义图标在离子2添加自定义图标在离子2(Add Custom Icon in Ionic 2)

2019-05-13 08:17发布

站内文章 / 移动开发
19 0 0

我使用的离子2，显影我的应用程序。 我要像我们用离子2个图标用用我的自定义图标在我的应用 标签。 例如： 

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

我怎样才能做到这一点？ 是否有任何建议的方式这样做呢？

Answer 1:

如果你想在离子使用自定义字体2+你可以用下面的做到这一点。

步骤01：

  • 有/自定义创建如使用工具字体SVG文件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;
  }
}

我们可以用我们的青菜在我们像青菜文件混合： 

@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的连锁反应，这还挺看起来很酷

[更新]二○一七年十一月三十日

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

对于离子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 2:

这是我发现，从论坛的最简单的方法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 3:

在当前的离子3.3.0您可以使用来自Anjum的解决方案，但你必须改变

@import "ionic.ionicons";

至

@import "ionicons";

在src /主题/ variables.scss文件。

找到这个解决方案在：

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



Answer 4:

一直在努力执行Anjum纳瓦布·谢赫回答在顶部的图标从icomoon SASS片。

我已经能够得到它与2.2.2版本的工作。

在WWW /项目的字体，我已经加入了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 5:

在开始之前 ：请确保您有你需要的每一个SVG文件。

现在只要去这里： http://fontello.com/

该工具会生成你的图标字体和所需要的CSS。 这是很直观的，只是用它，下载和复制您的字体，无论你在你的WWW文件夹想，但保持相同的文件结构 。 要完成，只是整合你的CSS文件在您index.html文件，你就大功告成了！

我希望这将解决您的问题！ ;-)



Answer 6:

据离子球队：

嘿！ 现在它仅限于使用ionicons，因为它的下面的渲染离子图标，多数民众赞成处理平台的差异。 你可以打开一个问题，我们可以讨论添加此功能有

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

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 ，

但不要似乎聪明的解决方案（我宁愿等待离子团队的解决方案）。

这样做的最好的情况是使用旧的方式，通过对SCSS文件创建一个类。



Answer 7:

对于加我在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 8:

我想，这一步一步GerritErpenstein是非常直观的，它的工作原理很适合我。 我离子的版本是2.2.2。 从字面上看，你用一句话这一点，它的工作要做：

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

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



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:

如果离子的方法是不适合你的工作，你可以用角的方式工作。 使用这个包： https://www.npmjs.com/package/angular-svg-icon 。

示例代码使用离子：

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



文章来源: Add Custom Icon in Ionic 2
标签： ionic-framework ionic2
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~