一、图标资源分类与获取

HarmonyOS 5 提供四大类图标资源：

1. 系统图标：包含箭头、开关、按钮等基础控件图标（如 ic_public_back）
2. 应用图标：应用启动图标与功能图标（尺寸含48x48/96x96等）
3. 装饰图标：用于空状态、提示信息的插画型图标
4. 主题图标：适配深浅模式的动态图标

获取途径：

• 通过DevEco Studio内置资源管理器直接调用
• 从HarmonyOS Design官网下载完整图标包
• 使用$r('sys.symbol.xxx')直接访问系统内置图标

二、基础图标使用示例

1. 系统图标调用

// 使用SymbolGlyph显示返回图标
SymbolGlyph($r('sys.symbol.ic_public_back'))
  .size({ width: 24, height: 24 })
  .margin(10)

// 带文本的复合图标（SymbolSpan）
TextSpan({
  content: '设置 ',
  font: { size: 16 }
}).append(
  SymbolSpan($r('sys.symbol.ic_public_settings'))
    .size(20)
)

2. 应用自定义图标

// 调用项目内media目录的图标
Image($r('app.media.home_icon'))
  .width(48)
  .height(48)

// 多分辨率自动适配（hdpi/xhdpi目录）
Image($r('app.media.user_avatar'))
  .objectFit(ImageFit.Contain)

三、高级功能实现

1. 动态主题适配

@State isDarkMode: boolean = false

build() {
  Image(this.isDarkMode ? 
    $r('app.media.logo_dark') : 
    $r('app.media.logo_light'))
    .width(120)
}

2. 动画图标实现

// 加载Lottie动画图标
Animator({
  duration: 1000,
  curve: Curve.EaseInOut
})
  .state(this.animateState)
Lottie({ 
  src: $rawfile('loading.json') 
})
  .width(80)
  .height(80)

四、免费使用规范与技巧

1. 合规要求：

   • 禁止修改官方图标核心设计（允许调整颜色/尺寸）
   • 商业应用需在关于页面注明"HarmonyOS Design"字样

2. 优化实践：

   • 优先使用WebP格式节省资源空间
   • 通过media://协议访问系统图标库
   • 使用SymbolSpan实现图文混排时保持基线对齐

3. 设计协同：

   • 使用Sketch/Figma插件导出标准尺寸图标
   • 通过resources/base/media管理多分辨率资源

五、开发注意事项

• 图标点击区域需≥48x48像素（无障碍要求）
• 深色背景使用#FFFFFF与#E6E6E6两种白色阶梯
• 多语言场景需测试阿拉伯文等从右至左布局
• 调用系统图标时需声明ohos.permission.SYMBOLICATE权限