在 Ionic 2 中添加自定义图标

Posted 2023-03-16

【中文标题】在 Ionic 2 中添加自定义图标

【英文标题】：Add Custom Icon in Ionic 2

【发布时间】：2016-11-22 14:32:01

【问题描述】：

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

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

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

【参考方案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>

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

【讨论】：

这对我来说实际上是最好的解决方案！使用十几个图标可以轻而易举地完成，并且可以像标准图标一样使用。

它工作得很好，但是你如何保持默认的 SVG 颜色呢？就我而言，即使我摆脱了将它们设置为黑色的所有“颜色”属性，我的图标也会变成黑色。他们仍然被，by？

@Gregordy，如果要保留原始颜色，请将“背景”改为“蒙版”。

@EduardoRoth 天哪，谢谢一百万兄弟！我还将“背景”从 currentColor 更改为我想要的，因为我得到了一个黑色的。感觉太好了，我现在不需要粘贴我的 svg 的每个“路径”子元素来让它工作！

我试图应用这个，但它不起作用..它根本不显示图标..我最终改用 img 标签...

【参考方案2】：

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

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

【讨论】：

"@extend .ion" 在 Ionic 2.1.0 中不起作用（编译器说它找不到 .ion）。我以这种方式在 vairables.scss 中导入它：@import "icomoon.scss";该文件包含您帖子的内容。我在这里做错了吗？

我也在使用 ionic 2.1.0，CLI 建议在 @extend .ion 之后使用 !optional 但现有图标也不显示。

对于更高版本的 ionic，请查看 Wolf 的答案，它为我解决了问题。

完美解决方案！这可能需要一些 gitproject 单独

如果搜索 import "ionic.ionicons" 时出错；并将其更改为导入“离子”；

【参考方案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

【讨论】：

我看不到这对添加 custom 图标有什么帮助

【参考方案4】：

一直在尝试使用 icomoon 的图标 sass 表在顶部实现 Anjum Nawab shaikh answer。

我已经能够让它与版本 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>

【参考方案5】：

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

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

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

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

【参考方案6】：

根据 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 文件上创建一个类。

【参考方案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>

【参考方案8】：

我认为 GerritErpenstein 的这个分步操作非常直观，对我来说效果很好。我的离子版本是 2.2.2。从字面上看，您使用这样的句子就完成了：

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

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

【参考方案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>

【参考方案10】：

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

离子用法示例代码：

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

【参考方案11】：

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

要使用自定义 SVG，请在 src 属性中提供其 url 以请求外部 SVG 文件。 src 属性的作用与 URL 必须可以从请求图像的网页访问相同。此外，外部文件只能是有效的 svg，并且不允许 svg 元素中包含脚本或事件。

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

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