ArkUI Symbol：小符号有字重，图标不必全靠图片

今天我们看 Symbol。它不是普通图片，更像一套能跟文字一起工作的符号字体。

如果只是放一个图标，Image 当然能做。但 Symbol 的好处是可以调字号、颜色、字重，还能塞进 Text 里和文字对齐。做导航、状态提示、小入口时，它会比单独准备一堆图片轻很多。

独立展示一个符号

案例里用的是系统符号资源：

SymbolGlyph($r('sys.symbol.open_sidebar'))
  .fontSize(34)
  .fontColor(['#2563EB'])
  .fontWeight(500)

fontSize 控制尺寸，fontColor 控制颜色，fontWeight 控制粗细。你会发现它的写法更接近 Text，不是图片组件那套 objectFit 思路。

看一眼渲染策略

同一个符号还可以切换渲染策略：

.renderingStrategy(SymbolRenderingStrategy.SINGLE)
.renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
.renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)

新手一开始不用记太多。一般先用 SINGLE，等你需要多色或者层次感时，再去看后两个。

直接混进文字里

SymbolSpan 可以放进 Text() 里：

Text() {
  SymbolSpan($r('sys.symbol.open_sidebar'))
  Span(' 侧边栏入口可以直接跟文字在一行')
}

这就是 Symbol 很舒服的地方：小图标不用单独占一个布局节点，和文字一起排版更自然。

你平时写小图标更习惯用 SVG、PNG，还是系统 Symbol？如果你有一类图标总是对不齐，也可以拿这个 Demo 改一下试试。

完整代码

@Entry
@Component
struct ArkUISymbolDemo {
  @Builder
  sectionTitle(title: string) {
    Text(title)
      .width('100%')
      .fontSize(15)
      .fontWeight(700)
      .fontColor('#334155')
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI Symbol')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('小符号有字重，图标不必全靠图片')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('SymbolGlyph 更像字体里的符号：能调字号、颜色、字重，也能直接混进文字里。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('独立符号')

          Row({ space: 20 }) {
            SymbolGlyph($r('sys.symbol.open_sidebar'))
              .fontSize(34)
              .fontColor(['#2563EB'])
              .fontWeight(500)

            SymbolGlyph($r('sys.symbol.open_sidebar'))
              .fontSize(42)
              .fontColor(['#0F766E'])
              .fontWeight(700)

            SymbolGlyph($r('sys.symbol.open_sidebar'))
              .fontSize(50)
              .fontColor(['#C2410C'])
              .fontWeight(900)
          }
          .width('100%')
          .justifyContent(FlexAlign.Start)

          Text('同一个符号可以通过 fontSize 和 fontWeight 做出不同层级。')
            .width('100%')
            .fontSize(14)
            .fontColor('#64748B')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F8FAFC')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('渲染策略')

          Row({ space: 18 }) {
            SymbolGlyph($r('sys.symbol.open_sidebar'))
              .fontSize(40)
              .fontColor(['#1D4ED8'])
              .renderingStrategy(SymbolRenderingStrategy.SINGLE)

            SymbolGlyph($r('sys.symbol.open_sidebar'))
              .fontSize(40)
              .fontColor(['#1D4ED8', '#93C5FD'])
              .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)

            SymbolGlyph($r('sys.symbol.open_sidebar'))
              .fontSize(40)
              .fontColor(['#1D4ED8'])
              .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
          }
          .width('100%')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('混进文字')

          Text() {
            SymbolSpan($r('sys.symbol.open_sidebar'))
              .fontSize(18)
              .fontColor(['#2563EB'])
              .fontWeight(700)
            Span(' 侧边栏入口可以直接跟文字在一行，不必单独写 Image。')
              .fontSize(15)
              .fontColor('#334155')
          }
          .width('100%')
          .lineHeight(26)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F0FDFA')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}