应用加载自定义Symbol
=============

#### 场景介绍

从5.1.1 (19)版本开始，新增支持资源注册。

适用于需要快速定制应用内[Symbol图标](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-symbolregister)，不想强依赖于系统版本中预制的系统Symbol图标资源。

#### 约束条件

资源注册支持Phone、Tablet、PC/2in1设备。

#### 开发步骤

1.  将UX设计师提供的Symbol图标资源（TTF文件）与动效参数资源（JSON文件）放入entry/src/main/resources/rawfile下，可新建目录。
    
    说明：[Symbol资源设计流程参考](https://developer.huawei.com/consumer/cn/doc/design-guides/system-icons-0000001929854962#section26702397263)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d9/v3/iWj6QTvxSzKxZT1ZnRinMg/zh-cn_image_0000002625187949.png?HW-CC-KV=V1&HW-CC-Date=20260612T073350Z&HW-CC-Expire=86400&HW-CC-Sign=A9206E78F9A1C7B0576E4B4BED0FD3878AB00AB23220C3B99CCD6A1E1533CAE6)
    
2.  多语言场景，在entry/src/main/resources目录中对应语言目录下的string.json文件中配置对应的Symbol图标Unicode值。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7e/v3/fUTp0PxRR_6pGgLJ3ZFR0Q/zh-cn_image_0000002625108093.png?HW-CC-KV=V1&HW-CC-Date=20260612T073350Z&HW-CC-Expire=86400&HW-CC-Sign=240CBD82ECEE1CDFA95E040239F3D1431C1D654EF1C7E42FD02CA08E22743FE0)
    
    {
      "string": \[
        {
          "name": "symbol\_custom\_phone\_fill\_1",
          "value": "0x100016"
        }
      \]
    }
    
3.  导入相关模块。
    
    import { symbolRegister } from '@kit.UIDesignKit';
    import { BusinessError } from '@kit.BasicServicesKit';
    
4.  在通过SymbolGlyph/SymbolSpan组件展示自定义Symbol图标前，需要注册加载图标资源与动效参数资源。
    
    try {
      let result = symbolRegister.registerSymbol($rawfile("symbol/symbol\_register.ttf"), $rawfile("symbol/symbol\_register.json"));
    } catch (error) {
      let err = error as BusinessError;
      console.error("errCode: " + err.code)
      console.error("error: " + err.message);
    }
    
5.  在需要展示自定义Symbol图标的页面通过SymbolGlyph/SymbolSpan组件展示该图标。
    
    struct test {
      build() {
        Column(){
          SymbolGlyph($r('app.string.symbol\_custom\_phone\_fill\_1'))
        }
      }
    }
    

#### 开发实例

import { symbolRegister } from '@kit.UIDesignKit'
import { BusinessError } from '@kit.BasicServicesKit'

@Entry
@Component
struct test {
  aboutToAppear(): void {
    try {
      let result = symbolRegister.registerSymbol($rawfile("symbol/symbol\_register.ttf"), $rawfile("symbol/symbol\_register.json"));
    } catch (error) {
      let err = error as BusinessError;
      console.error("errCode: " + err.code)
      console.error("error: " + err.message);
    }
  }
  build() {
    Column(){
      SymbolGlyph($r('app.string.symbol\_custom\_phone\_fill\_1'))
    }
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/08/v3/gB7rMmixTsaQoaxzD5DhVA/zh-cn_image_0000002594668576.png?HW-CC-KV=V1&HW-CC-Date=20260612T073350Z&HW-CC-Expire=86400&HW-CC-Sign=DC8B35E5B0AE9BF63CEB6C675C4DA467FD20AEC1F008DF2EFB5E7B261169AD16)