Mastering HarmonyOS Next System Resource Usage in One Article

#harmonyosnext

Mastering HarmonyOS Next System Resource Usage in One Article

The typical app development process requires design drafts and annotated cutouts before formal development. However, when writing demo or sample programs that need resources like icons and colors, design assets might not be available. The common approach is to find resources on third-party design websites, but HarmonyOS has built-in design icons that reduce both search costs and package size. This article introduces HarmonyOS Next's system resources and their usage.

The official design document module lists all system icon resources:

It includes 15 categories with 433 icon symbols. The right panel allows modifying icon weight, style, and color:

Seven animation effects for icons can also be viewed:

Using System Resources in Code

HarmonyOS Next provides the SymbolGlyph component for displaying icon symbols, supporting the following key attributes:

fontColor(value: Array<ResourceColor>): Sets the component color.
fontSize(value: number | string | Resource): Sets the component size. The icon display size is controlled by fontSize, while width/height only affect the component's placeholder size.
fontWeight(value: number | FontWeight | string): Sets the component weight. Number values range from 100 to 900 (step 100, default 400); string values support numeric strings (e.g., "400") and keywords like bold, bolder, lighter, regular, medium.
renderingStrategy(value: SymbolRenderingStrategy): Sets rendering strategies (monochrome, layered, multicolor).
effectStrategy(value: SymbolEffectStrategy): Sets animation effect strategies.
symbolEffect(symbolEffect: SymbolEffect, isActive?: boolean): Sets the effect and play state.
symbolEffect(symbolEffect: SymbolEffect, triggerValue?: number): Sets the effect and trigger condition.

Rendering and Effect Strategy Example

The following demo shows different rendering and effect strategies via renderingStrategy and effectStrategy:

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Column() {
          Text("Light")
          SymbolGlyph($r('sys.symbol.ohos_trash'))
            .fontWeight(FontWeight.Lighter)
            .fontSize(96)
        }

        Column() {
          Text("Normal")
          SymbolGlyph($r('sys.symbol.ohos_trash'))
            .fontWeight(FontWeight.Normal)
            .fontSize(96)
        }

        Column() {
          Text("Bold")
          SymbolGlyph($r('sys.symbol.ohos_trash'))
            .fontWeight(FontWeight.Bold)
            .fontSize(96)
        }
      }

      Row() {
        Column() {
          Text("Monochrome")
          SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
            .fontSize(96)
            .renderingStrategy(SymbolRenderingStrategy.SINGLE)
            .fontColor([Color.Black, Color.Green, Color.White])
        }

        Column() {
          Text("Multicolor")
          SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
            .fontSize(96)
            .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
            .fontColor([Color.Black, Color.Green, Color.White])
        }

        Column() {
          Text("Layered")
          SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
            .fontSize(96)
            .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
            .fontColor([Color.Black, Color.Green, Color.White])
        }
      }

      Row() {
        Column() {
          Text("No Effect")
          SymbolGlyph($r('sys.symbol.ohos_wifi'))
            .fontSize(96)
            .effectStrategy(SymbolEffectStrategy.NONE)
        }

        Column() {
          Text("Overall Scale Effect")
          SymbolGlyph($r('sys.symbol.ohos_wifi'))
            .fontSize(96)
            .effectStrategy(1)
        }

        Column() {
          Text("Layered Effect")
          SymbolGlyph($r('sys.symbol.ohos_wifi'))
            .fontSize(96)
            .effectStrategy(2)
        }
      }
    }
  }
}

System components are accessed via SymbolGlyph($r('sys.symbol.ohos_wifi')). The general formula is $r('sys.type.resource_name'), where:

sys denotes system resources.
type specifies the resource type (e.g., color, float, string, media, symbol).
resource_name is the resource identifier.