• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Symbol Glyph (SymbolGlyph/SymbolSpan)
2
3**SymbolGlyph** is a component designed for icon glyphs, making it easy to use sophisticated icons, including multi-colored icons. For details, see [SymbolGlyph](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolGlyph.md).
4
5
6## Creating a Symbol Glyph
7
8Create a symbol glyph by referencing a **Resource** asset, which is instantiated as a **Resource** object using the **$r** notation.
9
10  ```ts
11  SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus'))
12      .fontSize(96)
13      .renderingStrategy(SymbolRenderingStrategy.SINGLE)
14      .fontColor([Color.Black, Color.Green, Color.White])
15  ```
16  ![symbol_folder_badge_plus](figures/symbol_ohos_folder_badge_plus.png)
17
18
19## Adding to Text
20
21You can display icon glyphs by using [SymbolSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md) as a child component within the [Text](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md) component. You can add multiple **SymbolSpan** component into a **Text** component to show a sequence of icon glyphs.
22
23- Create a **SymbolSpan** component.
24
25  Place the **SymbolSpan** component within a **Text** component. It will not display if used alone.
26
27
28  ```ts
29  Text() {
30    SymbolSpan($r('sys.symbol.ohos_trash'))
31      .fontWeight(FontWeight.Normal)
32      .fontSize(96)
33  }
34  ```
35  ![symbol_trash](figures/symbolspan_trash.png)
36
37
38- Set the size of the **SymbolSpan** component using the **fontSize** attribute.
39
40
41  ```ts
42  Row() {
43    Column() {
44      Text("48")
45      Text() {
46        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
47          .fontSize(48)
48          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
49          .fontColor([Color.Black, Color.Green, Color.White])
50      }
51    }
52
53    Column() {
54      Text("72")
55      Text() {
56        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
57          .fontSize(72)
58          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
59          .fontColor([Color.Black, Color.Green, Color.White])
60      }
61    }
62
63    Column() {
64      Text("96")
65      Text() {
66        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
67          .fontSize(96)
68          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
69          .fontColor([Color.Black, Color.Green, Color.White])
70      }
71    }
72  }
73  ```
74  ![symbolSpan_multi_fontSize](figures/symbolspan_multi_fontsize.png)
75
76- Set the boldness of the **SymbolSpan** component using the **fontWeight** attribute.
77
78  ```ts
79  Row() {
80    Column() {
81      Text("Light")
82      Text() {
83        SymbolSpan($r('sys.symbol.ohos_trash'))
84        .fontWeight(FontWeight.Lighter)
85        .fontSize(96)
86      }
87    }
88
89    Column() {
90      Text("Normal")
91      Text() {
92        SymbolSpan($r('sys.symbol.ohos_trash'))
93          .fontWeight(FontWeight.Normal)
94          .fontSize(96)
95      }
96    }
97
98    Column() {
99      Text("Bold")
100      Text() {
101        SymbolSpan($r('sys.symbol.ohos_trash'))
102          .fontWeight(FontWeight.Bold)
103          .fontSize(96)
104      }
105    }
106  }
107  ```
108  ![symbolSpan_multi_fontWeight_trash](figures/symbol_multi_fontweight_trash.png)
109
110- Set the color of the **SymbolSpan** component using the **fontColor** attribute.
111
112  ```ts
113  Row() {
114    Column() {
115      Text("Black")
116      Text() {
117          SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
118            .fontSize(96)
119            .fontColor([Color.Black])
120      }
121    }
122
123    Column() {
124      Text("Green")
125      Text() {
126        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
127          .fontSize(96)
128          .fontColor([Color.Green])
129      }
130    }
131
132    Column() {
133      Text("Pink")
134      Text() {
135        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
136          .fontSize(96)
137          .fontColor([Color.Pink])
138      }
139    }
140  }
141  ```
142  ![symbolSpan_multi_fontColor](figures/symbolspan_multi_fontcolor.PNG)
143
144- Set the rendering strategy of the **SymbolSpan** component using the **renderingStrategy** attribute.
145
146  ```ts
147  Row() {
148    Column() {
149      Text("Single-color mode")
150      Text() {
151        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
152          .fontSize(96)
153          .renderingStrategy(SymbolRenderingStrategy.SINGLE)
154          .fontColor([Color.Black, Color.Green, Color.White])
155      }
156    }
157
158    Column() {
159      Text("Multi-color mode")
160      Text() {
161        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
162          .fontSize(96)
163          .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
164          .fontColor([Color.Black, Color.Green, Color.White])
165      }
166    }
167
168    Column() {
169      Text ("Layered mode")
170      Text() {
171        SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
172          .fontSize(96)
173          .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
174          .fontColor([Color.Black, Color.Green, Color.White])
175      }
176    }
177  }
178  ```
179  ![symbolSpan_multi_renderingStrategy](figures/symbolspan_multi_renderingStrategy.png)
180
181- Set the effect strategy of the **SymbolSpan** component using the **effectStrategy** attribute.
182
183  ```ts
184  Row() {
185    Column() {
186      Text("No effect")
187      Text() {
188        SymbolSpan($r('sys.symbol.ohos_wifi'))
189          .fontSize(96)
190          .effectStrategy(SymbolEffectStrategy.NONE)
191      }
192    }
193
194    Column() {
195      Text("Overall scale effect")
196      Text() {
197        SymbolSpan($r('sys.symbol.ohos_wifi'))
198          .fontSize(96)
199          .effectStrategy(SymbolEffectStrategy.SCALE)
200      }
201    }
202
203    Column() {
204      Text("Hierarchical effect")
205      Text() {
206        SymbolSpan($r('sys.symbol.ohos_wifi'))
207          .fontSize(96)
208          .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
209      }
210    }
211  }
212  ```
213  ![symbolSpan_multi_effectStrategy](figures/symbolspan_multi_effectStrategy.gif)
214
215- **SymbolSpan** does not support universal events.
216
217## Customizing Symbol Glyph Animations
218
219In addition to using the **effectStrategy** attribute, which triggers an animation once it is activated, you can control the animation playback and choose from a variety of effect strategies using the following two methods.
220
221For details about how **effectStrategy** works with **symbolEffect**, see [SymbolGlyph.symbolEffect](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolGlyph.md#symboleffect12-1).
222
223- Use the **symbolEffect** attribute to set both the effect strategy and playback state of **SymbolGlyph**.
224
225  ```ts
226  @State isActive: boolean = true;
227  Column() {
228    Text("Variable Color Effect")
229    SymbolGlyph($r('sys.symbol.ohos_wifi'))
230      .fontSize(96)
231      .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive)
232    Button(this.isActive ? 'Off' : 'Play').onClick(() => {
233      this.isActive = !this.isActive;
234    })
235  }
236  ```
237  ![symbolGlyph_symbolEffect_isActive](figures/symbolGlyph_symbolEffect_isActive.gif)
238
239- Use the **symbolEffect** attribute to set both the effect strategy and the trigger for playback of **SymbolGlyph**.
240
241  ```ts
242  @State triggerValueReplace: number = 0;
243  Column() {
244    Text("Bounce Effect")
245    SymbolGlyph($r('sys.symbol.ellipsis_message_1'))
246      .fontSize(96)
247      .fontColor([Color.Gray])
248      .symbolEffect(new BounceSymbolEffect(EffectScope.WHOLE, EffectDirection.UP), this.triggerValueReplace)
249    Button('Trigger').onClick(() => {
250      this.triggerValueReplace = this.triggerValueReplace + 1;
251    })
252  }
253  ```
254  ![BounceSymbolEffect](figures/symbolGlyph_bounceSymbolEffect_trigger.gif)
255
256
257## Adding Events
258
259You can add universal events, such as **onClick** and **onTouch**, to the **SymbolGlyph** component to handle user interactions.
260
261```ts
262@State wifiColor: ResourceColor = Color.Black;
263SymbolGlyph($r('sys.symbol.ohos_wifi'))
264.fontSize(96)
265.fontColor([this.wifiColor])
266.onClick(()=>{
267  this.wifiColor = Color.Gray
268})
269```
270![symbolGlyph_onClick](figures/symbolGlyph_onClick.gif)
271
272## Example
273
274
275```ts
276// xxx.ets
277@Entry
278@Component
279struct Index {
280  @State triggerValueReplace: number = 0;
281  @State symbolSources: Resource[] = [$r('sys.symbol.repeat'), $r('sys.symbol.repeat_1'), $r('sys.symbol.arrow_left_arrow_right')]
282  @State symbolSourcesIndex: number = 0;
283  @State symbolText: string[] = ['Play in order','Loop song','Shuffle']
284  @State symbolTextIndex: number = 0;
285  @State fontColorValue:ResourceColor = Color.Grey;
286  @State fontColorValue1:ResourceColor = '#E8E8E8';
287
288  build() {
289    Column( { space: 10 }) {
290      Row() {
291        Text(){
292          Span('Playlist')
293            .fontSize(20)
294            .fontWeight(FontWeight.Bolder)
295          Span('(101)')
296        }
297      }
298      Row() {
299        Row({ space: 5 }) {
300          SymbolGlyph(this.symbolSources[this.symbolSourcesIndex])
301            .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace)
302            .fontSize(20)
303            .fontColor([this.fontColorValue])
304          Text(this.symbolText[this.symbolTextIndex])
305            .fontColor(this.fontColorValue)
306        }
307        .onClick(()=>{
308          this.symbolTextIndex++;
309          this.symbolSourcesIndex++;
310          this.triggerValueReplace++;
311          if (this.symbolSourcesIndex > (this.symbolSources.length - 1)) {
312            this.symbolSourcesIndex = 0;
313            this.triggerValueReplace = 0;
314          }
315          if (this.symbolTextIndex > (this.symbolText.length - 1)) {
316            this.symbolTextIndex = 0;
317          }
318        })
319        .width('75%')
320
321        Row({ space: 5 }) {
322          Text(){
323            SymbolSpan($r('sys.symbol.arrow_down_circle_badge_vip_circle_filled'))
324              .fontColor([this.fontColorValue])
325              .fontSize(20)
326          }
327          Text(){
328            SymbolSpan($r('sys.symbol.heart_badge_plus'))
329              .fontColor([this.fontColorValue])
330              .fontSize(20)
331          }
332          Text(){
333            SymbolSpan($r('sys.symbol.ohos_trash'))
334              .fontColor([this.fontColorValue])
335              .fontSize(20)
336          }
337        }
338        .width('25%')
339      }
340      Divider().width(5).color(this.fontColorValue1).width('98%')
341      Row(){
342        Row(){
343          Text("Song 1")
344        }.width('82%')
345        Row({ space: 5}) {
346          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
347            .fontColor([this.fontColorValue])
348            .fontSize(20)
349          SymbolGlyph($r('sys.symbol.trash'))
350            .fontColor([this.fontColorValue])
351            .fontSize(20)
352        }
353      }
354      Divider().width(5).color(this.fontColorValue1).width('98%')
355      Row(){
356        Row(){
357          Text("Song 2")
358        }.width('82%')
359        Row({ space: 5}) {
360          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
361            .fontColor([this.fontColorValue])
362            .fontSize(20)
363          SymbolGlyph($r('sys.symbol.trash'))
364            .fontColor([this.fontColorValue])
365            .fontSize(20)
366        }
367      }
368      Divider().width(5).color(this.fontColorValue1).width('98%')
369      Row(){
370        Row(){
371          Text("Song 3")
372        }.width('82%')
373        Row({ space: 5}) {
374          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
375            .fontColor([this.fontColorValue])
376            .fontSize(20)
377          SymbolGlyph($r('sys.symbol.trash'))
378            .fontColor([this.fontColorValue])
379            .fontSize(20)
380        }
381      }
382      Divider().width(5).color(this.fontColorValue1).width('98%')
383      Row(){
384        Row(){
385          Text("Song 4")
386        }.width('82%')
387        Row({ space: 5}) {
388          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
389            .fontColor([this.fontColorValue])
390            .fontSize(20)
391          SymbolGlyph($r('sys.symbol.trash'))
392            .fontColor([this.fontColorValue])
393            .fontSize(20)
394        }
395      }
396      Divider().width(5).color(this.fontColorValue1).width('98%')
397      Row(){
398        Row(){
399          Text("Song 5")
400        }.width('82%')
401        Row({ space: 5}) {
402          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
403            .fontColor([this.fontColorValue])
404            .fontSize(20)
405          SymbolGlyph($r('sys.symbol.trash'))
406            .fontColor([this.fontColorValue])
407            .fontSize(20)
408        }
409      }
410      Divider().width(5).color(this.fontColorValue1).width('98%')
411      Row(){
412        Row(){
413          Text("Song 6")
414        }.width('82%')
415        Row({ space: 5}) {
416          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
417            .fontColor([this.fontColorValue])
418            .fontSize(20)
419          SymbolGlyph($r('sys.symbol.trash'))
420            .fontColor([this.fontColorValue])
421            .fontSize(20)
422        }
423      }
424      Divider().width(5).color(this.fontColorValue1).width('98%')
425      Row(){
426        Row(){
427          Text("Song 7")
428        }.width('82%')
429        Row({ space: 5}) {
430          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
431            .fontColor([this.fontColorValue])
432            .fontSize(20)
433          SymbolGlyph($r('sys.symbol.trash'))
434            .fontColor([this.fontColorValue])
435            .fontSize(20)
436        }
437      }
438      Divider().width(5).color(this.fontColorValue1).width('98%')
439      Column(){
440        Text("Close")
441      }
442      .alignItems(HorizontalAlign.Center)
443      .width('98%')
444    }
445    .alignItems(HorizontalAlign.Start)
446    .width('100%')
447    .height(400)
448    .padding({
449      left:10,
450      top:10
451    })
452  }
453}
454```
455![symbol_scene_demo](figures/symbol_music_demo.gif)
456