HarmonyOS iconFont支持情况？

Question

可以较大减少图片资源文件占用app包体积大小；

iconfont 例如：

https://www.iconfont.cn/collections/detail?spm=a313x.collections\_index.i1.d9df05512.61a83a81pMAlKe&cid=42993

https://www.iconfont.cn/collections/detail?spm=a313x.collections\_index.i1.d9df05512.61a83a81pMAlKe&cid=42993

Answer 1

import { font } from '@kit.ArkUI'
@Entry
@Component
struct UseIconFont {
  // 假设e621为指定icon的Unicode，实际需要开发者从注册的iconFont的ttf文件里面获取Unicode
  @State unicode: string = '\ue621';
  aboutToAppear(): void {
    font.registerFont({
      familyName: 'iconfont',
      familySrc: $rawfile('iconfont.ttf')
    })
  }
  build() {
    Row() {
      Column() {
        Text(this.unicode)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontFamily('iconfont')
      }
      .width('100%')
    }
    .height('100%')
  }
}

ttf文件获取参考：

https://blog.csdn.net/weixin\_44869002/article/details/119293596

Unicode 获取可以在阿里云的iconfont.json文件中找到unicode 参数。例如：

{
  "id": "",
"name": "",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
  {
    "icon_id": "33987162",
  "name": "保护号码",
  "font_class": "baohuhaoma",
  "unicode": "e621",
  "unicode_decimal": 58913
  }
  ]
}