字體圖標在網頁中非常常見了。為了方便在小程序裏面重復使用，自定義了一個圖標組件，方便控制它的大小，顏色，自定義點擊事件。

自定義圖標組件的代碼如下：

下面的代碼是icon文件夾下面的4個文件

<view
  class="custom-class ss-font ss-icon-{{ name }}"
  style="{{ color ? ‘color: ‘ + color : ‘‘ }}; {{ size ? ‘font-size: ‘ + size : ‘‘ }}"
  bind:tap="onClick"
>
  <view wx:if
 
="{{ info !== null }}" class="ss-icon__info">{{ info }}</view>
</view>

上面的 ss-font 和 ss-icon 是根據你在阿裏巴巴圖標庫項目中自定義的，我的如下圖：

index.js:

Component({
  options: {
    addGlobalClass: true
  },

  externalClasses: [‘custom-class‘],

  properties: {
    info: null,
    name: String,
    size: String,
    color: String
  },

  methods: {
    onClick() {
      
 
this.triggerEvent(‘click‘);
    }
  }
});

上面如果理解有困難的可以先看一下小程序組件介紹大概了解一些基本概念。

index.json:

{
  "component": true
}

index.wxss:

/**
這裏放你的所有圖標的代碼
在阿裏巴巴矢量庫，選擇 Unicode 模式，下載解壓後的iconfont.css裏面的代碼，下面有截圖可供參考
**/
.ss-icon__info {
  color: #fff;
  left: 100%;
  top: -.5em;
  font-size: 0.5em;
  padding: 0 0.3em
 
;
  text-align: center;
  min-width: 1.2em;
  line-height: 1.2;
  position: absolute;
  border-radius: 0.6em;
  box-sizing: border-box;
  background-color: #f44;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
}

API:

使用方法：

在index.json引入該組件：

"usingComponents": {
  "ss-icon": "/components/icon/index"
}

設置name屬性為對應的圖標名稱即可。

<ss-icon name="tel" />

這些圖標就是你自己定義的。像我下面的電話圖標：

像什麽顏色，大小的配置可以查看上面的API表格。這裏就不一一贅述了~

微信小程序——自定義圖標組件