学习目标：

SymboGlyph使用
SymbolSpan使用

学习内容：

@Entry
@Component
struct IconTest {
  @State isActive: boolean = false;

  build() {
    Flex( { direction: FlexDirection.Column, justifyContent: FlexAlign.Start } ) {
      //SymboGlyph练习
      Row({ space: 10 }){
        SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
          .fontSize(30)
          .fontColor([Color.Blue])
        Text('用SymbolGlyph创建图标')
          .fontSize(20)
          .fontColor(Color.Blue)
      }.width('100%')

      Divider().margin({ top: 10 }).width('100%')

      // SymbolSpan练习
      Row({ space: 10 }){
        //文本图标
        Text(){
          SymbolSpan($r('sys.symbol.book'))
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
            .fontColor([Color.Black, Color.Green, Color.White])
        }
        Text('用SymbolSpan创建图标')
          .fontSize(20)
      }.margin({ top: 10 }).width('100%')

      Divider().margin({ top: 10 })

      //图标动画练习
      Row({ space: 10 }){
        SymbolGlyph($r('sys.symbol.ohos_wifi'))
          .fontSize(50)
          .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE),this.isActive)
        Button(this.isActive==false?'播放':'暂停').onClick(()=>{
          this.isActive = !this.isActive
        })
      }.margin({ top: 10 })
      
    }
    .height('100%')
    .width('100%')
    .padding({ left: 20, right: 20 })
  }
}

学习产出：

仿照华为音乐列表做的小栗子, 大家可以尝试做一下