ionic-framework - 在 ionic2 中使用带有标签的自定义图标

Question

我需要在ionic 2中使用带有标签的海关图标。

此外，如果选择了选项卡，我需要更改标题颜色和图标。

示例:

ionic Tabs

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*="custom-"] {
        // 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*="custom-icon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="custom-icon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
    &[class*="custom-icon3"] {
        mask-image: url(../assets/img/customicon3.svg);
    }
}

然后在您的模板中，您可以使用以下 HTML 来创建图标:

<ion-icon class="custom-icon1"></ion-icon>

在其他问题中，人们建议使用基于字体的方法。不过，这个答案使用起来要简单得多，只要您不添加数百个图标就可以了。需要注意的是，每个图像都作为单独的请求发送，与字体方法一样，所有图像都包含在一个文件中，因此效率会更高一些。