ionic2 使用自定义icon

最新推荐文章于 2025-06-30 13:21:06 发布

原创最新推荐文章于 2025-06-30 13:21:06 发布 · 3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ionic2 #icon #tabIcon

ionic2 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何在Ionic应用中使用自定义SVG图标替代默认图标。通过修改SCSS文件并定义特定的类来应用SVG图像，同时调整tabs的颜色设置，实现个性化图标效果。

ionic2官方给了上千个icon，可以说已经应有尽有了。但是有时候我们就需要自己设计的icon，怎么办？

其实也很简单，方法如下：

1.在app.scss中引用svg图片

ion-icon {
    &[class*="appname-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        -webkit-mask-size:  contain;
        -webkit-mask-repeat: no-repeat;
        // mask-position: 50% 50%;        
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="appname-bendian"] {
        -webkit-mask-image: url(../assets/svg/ryz-bendian.svg);
    }
    &[class*="appname-shouye"] {
        -webkit-mask-image: url(../assets/svg/ryz-shouye.svg);
    }
    &[class*="appname-shuju"] {
        -webkit-mask-image: url(../assets/svg/ryz-shuju.svg);
    }
    &[class*="appname-wode"] {
        -webkit-mask-image: url(../assets/svg/ryz-wode.svg);
    }
}

显然，我们定义了一个以‘appname-’开头的class，设置了一些样式属性，如width，height等
然后，设置具体的class对应的svg图片

因为tab有点击和未点击两种，所以每种属性应该有actived和outline两种。但ionic会自己帮你填充actived状态的颜色，所以只需要一种就ok

2.在variables.scss中，设置tab选中和未选中的颜色值

$tabs-ios-tab-text-color: #5e616d;
$tabs-ios-tab-text-color-active : #1e82d2;
$tabs-ios-tab-icon-color : #5e616d;
$tabs-ios-tab-icon-color-active : #1e82d2;
$tabs-md-tab-text-color: #5e616d;
$tabs-md-tab-text-color-active : #1e82d2;
$tabs-md-tab-icon-color : #5e616d;
$tabs-md-tab-icon-color-active : #1e82d2;

显然，需要分别设置ios和md（Android）两个平台的值

3.在tabs.html中使用

<ion-tabs #homeTabs>
  <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="appname-shouye" ></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="数据" tabIcon="appname-shuju" ></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="本店" tabIcon="appname-bendian" [show]='oneShop'></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="本店" tabIcon="appname-bendian" [show]='!oneShop'></ion-tab>  
  <ion-tab [root]="tab4Root"  tabTitle="我的" tabIcon="appname-wode" ></ion-tab>
  
</ion-tabs>

其中，tabIcon设置的是变量

4.在tabs.ts中定义tabIcon变量对应的class值

  iconShouye = 'appname-shouye';
  iconShuju = 'appname-shuju';
  iconBendian = 'appname-bendian';
  iconWode = 'appname-wode';

其中，appname-即就是上面我们在app.scss中定义的class名称。

ok，搞定！