Biểu tượng dạng font (icon font) là giải pháp phổ biến để hiển thị các biểu tượng vector mượt mà và dễ mở rộng trên nền tảng web. Trong môi trường ứng dụng nhỏ WeChat (WeChat Mini Program), việc tái sử dụng biểu tượng một cách linh hoạt — kèm theo khả năng điều chỉnh kích thước, màu sắc và xử lý sự kiện — đòi hỏi một thành phần đóng gói riêng. Dưới đây là cách triển khai một thành phần <icn> tối giản nhưng đầy đủ chức năng, được thiết kế dựa trên bộ biểu tượng từ thư viện Iconfont của Alibaba.

Cấu trúc thành phần

Thành phần được đặt trong thư mục /components/icn/, gồm bốn tệp bắt buộc:

index.wxml

<view
  class="ext-class icn-font icn-{{ symbol }}"
  style="{{ color ? 'color: ' + color : '' }}; {{ scale ? 'font-size: ' + scale : '' }}"
  bind:tap="handleTap"
>
  <view wx:if="{{ badge }}" class="icn__badge">{{ badge }}</view>
</view>

Lưu ý: Các lớp icn-font và icn-* tương ứng với tên font và mã Unicode đã khai báo trong tệp CSS biểu tượng (ví dụ: .icn-tel::before { content: "\e601"; }).

index.js

Component({
  options: {
    addGlobalClass: true
  },

  externalClasses: ['ext-class'],

  properties: {
    symbol: {
      type: String,
      value: ''
    },
    badge: {
      type: [String, Number],
      value: null
    },
    color: {
      type: String,
      value: ''
    },
    scale: {
      type: String,
      value: ''
    }
  },

  methods: {
    handleTap() {
      this.triggerEvent('activate');
    }
  }
});

index.json

{
  "component": true
}

index.wxss

/* Nhúng toàn bộ quy tắc CSS từ iconfont.css (chế độ Unicode) tại đây */
.icn__badge {
  position: absolute;
  top: -0.4em;
  right: -0.4em;
  min-width: 1.1em;
  height: 1.1em;
  line-height: 1.1em;
  text-align: center;
  font-size: 0.55em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  padding: 0 0.25em;
  box-sizing: border-box;
  transform: translate(50%, -50%);
}

API Tham Chiếu

Cách sử dụng

Khởi tạo thành phần trong tệp cấu hình của trang (ví dụ: pages/index/index.json):

"usingComponents": {
  "icn": "/components/icn/index"
}

Sử dụng trong WXML:

<icn symbol="mail" color="#2d8cf0" scale="24px" />
<icn symbol="user" badge="9+" color="#ff9900" scale="20px" ext-class="highlight" />

Bộ biểu tượng cần được xuất từ Iconfont với chế độ Unicode, sau đó sao chép nội dung CSS vào index.wxss. Đảm bảo font-face được khai báo đúng trong tệp app.wxss hoặc tệp CSS toàn cục.