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 and animated icons. You can add symbol glyphs in text through the use of the **SymbolSpan** component, a child of the **Text** component. For details, see [SymbolGlyph](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolGlyph.md) and [SymbolSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md).
4
5
6## Creating a Symbol Glyph
7
8You create a symbol glyph by referencing a resource through $r. Currently, only the preset symbol resources are supported.
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
21To embed a symbol glyph within a text string, use [SymbolSpan](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md) as a child of the [Text](../reference/apis-arkui/arkui-ts/ts-basic-components-text.md) component. You can nest multiple **SymbolSpan** components to display a series of symbol glyphs.
22
23- Create a **SymbolSpan** component.
24
25  The **SymbolSpan** component works only when included in a **Text** component. It does not display any content when 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 through [fontSize](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md#fontsize).
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 weight of the **SymbolSpan** component through [fontWeight](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md#fontweight).
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 through [fontColor](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md#fontcolor).
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 through [renderingStrategy](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md#renderingstrategy).
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 through [effectStrategy](../reference/apis-arkui/arkui-ts/ts-basic-components-symbolSpan.md#effectstrategy).
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](../reference/apis-arkui/arkui-ts/ts-universal-events-click.md#onclick) and [onTouch](../reference/apis-arkui/arkui-ts/ts-universal-events-touch.md#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
274This example shows how to implement a playlist with the use of **symbolEffect**, **fontSize**, and **fontColor**.
275
276```ts
277// xxx.ets
278@Entry
279@Component
280struct Index {
281  @State triggerValueReplace: number = 0;
282  @State symbolSources: Resource[] = [$r('sys.symbol.repeat'), $r('sys.symbol.repeat_1'), $r('sys.symbol.arrow_left_arrow_right')]
283  @State symbolSourcesIndex: number = 0;
284  @State symbolText: string[] = ['Play in order','Loop song','Shuffle']
285  @State symbolTextIndex: number = 0;
286  @State fontColorValue:ResourceColor = Color.Grey;
287  @State fontColorValue1:ResourceColor = '#E8E8E8';
288
289  build() {
290    Column( { space: 10 }) {
291      Row() {
292        Text(){
293          Span('Playlist')
294            .fontSize(20)
295            .fontWeight(FontWeight.Bolder)
296          Span('(101)')
297        }
298      }
299      Row() {
300        Row({ space: 5 }) {
301          SymbolGlyph(this.symbolSources[this.symbolSourcesIndex])
302            .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace)
303            .fontSize(20)
304            .fontColor([this.fontColorValue])
305          Text(this.symbolText[this.symbolTextIndex])
306            .fontColor(this.fontColorValue)
307        }
308        .onClick(()=>{
309          this.symbolTextIndex++;
310          this.symbolSourcesIndex++;
311          this.triggerValueReplace++;
312          if (this.symbolSourcesIndex > (this.symbolSources.length - 1)) {
313            this.symbolSourcesIndex = 0;
314            this.triggerValueReplace = 0;
315          }
316          if (this.symbolTextIndex > (this.symbolText.length - 1)) {
317            this.symbolTextIndex = 0;
318          }
319        })
320        .width('75%')
321
322        Row({ space: 5 }) {
323          Text(){
324            SymbolSpan($r('sys.symbol.arrow_down_circle_badge_vip_circle_filled'))
325              .fontColor([this.fontColorValue])
326              .fontSize(20)
327          }
328          Text(){
329            SymbolSpan($r('sys.symbol.heart_badge_plus'))
330              .fontColor([this.fontColorValue])
331              .fontSize(20)
332          }
333          Text(){
334            SymbolSpan($r('sys.symbol.ohos_trash'))
335              .fontColor([this.fontColorValue])
336              .fontSize(20)
337          }
338        }
339        .width('25%')
340      }
341      Divider().width(5).color(this.fontColorValue1).width('98%')
342      Row(){
343        Row(){
344          Text("Song 1")
345        }.width('82%')
346        Row({ space: 5}) {
347          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
348            .fontColor([this.fontColorValue])
349            .fontSize(20)
350          SymbolGlyph($r('sys.symbol.trash'))
351            .fontColor([this.fontColorValue])
352            .fontSize(20)
353        }
354      }
355      Divider().width(5).color(this.fontColorValue1).width('98%')
356      Row(){
357        Row(){
358          Text("Song 2")
359        }.width('82%')
360        Row({ space: 5}) {
361          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
362            .fontColor([this.fontColorValue])
363            .fontSize(20)
364          SymbolGlyph($r('sys.symbol.trash'))
365            .fontColor([this.fontColorValue])
366            .fontSize(20)
367        }
368      }
369      Divider().width(5).color(this.fontColorValue1).width('98%')
370      Row(){
371        Row(){
372          Text("Song 3")
373        }.width('82%')
374        Row({ space: 5}) {
375          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
376            .fontColor([this.fontColorValue])
377            .fontSize(20)
378          SymbolGlyph($r('sys.symbol.trash'))
379            .fontColor([this.fontColorValue])
380            .fontSize(20)
381        }
382      }
383      Divider().width(5).color(this.fontColorValue1).width('98%')
384      Row(){
385        Row(){
386          Text("Song 4")
387        }.width('82%')
388        Row({ space: 5}) {
389          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
390            .fontColor([this.fontColorValue])
391            .fontSize(20)
392          SymbolGlyph($r('sys.symbol.trash'))
393            .fontColor([this.fontColorValue])
394            .fontSize(20)
395        }
396      }
397      Divider().width(5).color(this.fontColorValue1).width('98%')
398      Row(){
399        Row(){
400          Text("Song 5")
401        }.width('82%')
402        Row({ space: 5}) {
403          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
404            .fontColor([this.fontColorValue])
405            .fontSize(20)
406          SymbolGlyph($r('sys.symbol.trash'))
407            .fontColor([this.fontColorValue])
408            .fontSize(20)
409        }
410      }
411      Divider().width(5).color(this.fontColorValue1).width('98%')
412      Row(){
413        Row(){
414          Text("Song 6")
415        }.width('82%')
416        Row({ space: 5}) {
417          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
418            .fontColor([this.fontColorValue])
419            .fontSize(20)
420          SymbolGlyph($r('sys.symbol.trash'))
421            .fontColor([this.fontColorValue])
422            .fontSize(20)
423        }
424      }
425      Divider().width(5).color(this.fontColorValue1).width('98%')
426      Row(){
427        Row(){
428          Text("Song 7")
429        }.width('82%')
430        Row({ space: 5}) {
431          SymbolGlyph($r('sys.symbol.play_arrow_triangle_2_circlepath'))
432            .fontColor([this.fontColorValue])
433            .fontSize(20)
434          SymbolGlyph($r('sys.symbol.trash'))
435            .fontColor([this.fontColorValue])
436            .fontSize(20)
437        }
438      }
439      Divider().width(5).color(this.fontColorValue1).width('98%')
440      Column(){
441        Text("Close")
442      }
443      .alignItems(HorizontalAlign.Center)
444      .width('98%')
445    }
446    .alignItems(HorizontalAlign.Start)
447    .width('100%')
448    .height(400)
449    .padding({
450      left:10,
451      top:10
452    })
453  }
454}
455```
456![symbol_scene_demo](figures/symbol_music_demo.gif)
457