ionic项目中使用自定义图标打包出现错误-broken import

添加自定义字体图标

在src目录下新建icon文件夹，把字体文件放进去。然后在theme/variables.scss中后面添加以下内容，注意把相应位置替换成你自己的：

$iconfont-path: "../assets/icon";

@font-face {
  font-family: "iconfont";
  src: url('#{$iconfont-path}/iconfont.eot?t=1495679878046'); /* IE9*/
  src: url('#{$iconfont-path}/iconfont.eot?t=1495679878046#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('#{$iconfont-path}/iconfont.woff?t=1495679878046') format('woff'), /* chrome, firefox */
  url('#{$iconfont-path}/iconfont.ttf?t=1495679878046') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('#{$iconfont-path}/iconfont.svg?t=1495679878046#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 1.6rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ion-md-customer-home:before,
.ion-ios-customer-home:before,
.ion-ios-customer-home-outline:before,
.ion-md-customer-rank:before,
.ion-ios-customer-rank:before,
.ion-ios-customer-rank-outline:before,
.ion-md-customer-stock:before,
.ion-ios-customer-stock:before,
.ion-ios-customer-stock-outline:before {
  @extend .iconfont;
}

.ion-md-customer-home:before { //在这里自定义你的名字，例如：customer-home，前缀也要加上，与平台相关
  content: "\e60f";
}

.ion-ios-customer-home:before {
  content: "\e611";
}

.ion-ios-customer-home-outline:before {
  content: "\e60f";
}

.ion-md-customer-rank:before {
  content: "\e60d";
}

.ion-ios-customer-rank:before {
  content: "\e60e";
}

.ion-ios-customer-rank-outline:before {
  content: "\e60d";
}

.ion-md-customer-stock:before {
  content: "\e610";
}

.ion-ios-customer-stock:before {
  content: "\e612";
}

.ion-ios-customer-stock-outline:before {
  content: "\e610";
}
$tabs-ios-tab-text-color-active:#f6670B; //设置点击后的颜色
$tabs-ios-tab-icon-color-active:#f6670B;
$tabs-md-tab-text-color-active:#f6670B;
$tabs-md-tab-icon-color-active:#f6670B;

 

然后在需要的地方，例如在tabs.html中：

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="{{ 'TABS.TAB1_TITLE' | translate }}" tabIcon="customer-home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="{{ 'TABS.TAB2_TITLE' | translate }}" tabIcon="customer-rank"></ion-tab>
</ion-tabs>