ionic-framework - 在 Ionic 2 中添加自定义图标

Question

我正在使用 Ionic 2 来开发我的应用程序。我想在我的应用程序中使用自定义图标，就像我们使用 标签使用 ionic 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>

这比使用基于字体的方法简单得多。只要您不添加数百个图标，您就应该可以使用此方法。然而，每个图像都作为单独的请求发送，与字体方法一样，所有图像都包含在一个文件中，因此效率会更高一些。