我需要在ionic 2中使用带有标签的海关图标。
此外,如果选择了选项卡,我需要更改标题颜色和图标。
示例:
ionic Tabs
最佳答案
这是我找到的最简单的方法,来自 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>
在其他问题中,人们建议使用基于字体的方法。不过,这个答案使用起来要简单得多,只要您不添加数百个图标就可以了。需要注意的是,每个图像都作为单独的请求发送,与字体方法一样,所有图像都包含在一个文件中,因此效率会更高一些。
关于ionic-framework - 在 ionic2 中使用带有标签的自定义图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42243553/