1# SymbolSpan
2
3As a child component of the **Text** component, the **SymbolSpan** component is used to display small icons.
4
5>  **NOTE**
6>
7> - This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> - This component can inherit attribute settings from its parent component **Text**. This means that, if an attribute is not set in this component, it takes the value of the attribute (if set) from its parent component.
10>
11> - The **SymbolSpan** component is not dimmed when dragged.
12
13## Child Components
14
15Not supported
16
17## APIs
18
19SymbolSpan(value: Resource)
20
21**Widget capability**: This API can be used in ArkTS widgets since API version 12.
22
23**Atomic service API**: This API can be used in atomic services since API version 12.
24
25**System capability**: SystemCapability.ArkUI.ArkUI.Full
26
27**Parameters**
28
29| Name| Type| Mandatory| Description|
30| -------- | -------- | -------- | -------- |
31| value | [Resource](ts-types.md#resource)| Yes| Resource of the **SymbolSpan** component, for example, **$r('sys.symbol.ohos_wifi')**.|
32
33>  **NOTE**
34>
35>  The resources referenced in **$r('sys.symbol.ohos_wifi')** are preset in the system. The **SymbolSpan** component supports only the preset symbol resources. If unsupported resources are referenced, an exception occurs.
36
37## Attributes
38
39The [universal attributes](ts-universal-attributes-size.md) are not supported. Only the following attributes are supported.
40
41### fontColor
42
43fontColor(value: Array<ResourceColor>)
44
45Sets the color of the symbol span.
46
47**Widget capability**: This API can be used in ArkTS widgets since API version 12.
48
49**Atomic service API**: This API can be used in atomic services since API version 12.
50
51**System capability**: SystemCapability.ArkUI.ArkUI.Full
52
53**Parameters**
54
55| Name| Type                                               | Mandatory| Description                                                        |
56| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
57| value  | Array\<[ResourceColor](ts-types.md#resourcecolor)\> | Yes  | Color of the symbol span.<br> Default value: depending on the rendering strategy|
58
59### fontSize
60
61fontSize(value: number | string | Resource)
62
63Sets the size of the symbol span.
64
65**Widget capability**: This API can be used in ArkTS widgets since API version 12.
66
67**Atomic service API**: This API can be used in atomic services since API version 12.
68
69**System capability**: SystemCapability.ArkUI.ArkUI.Full
70
71**Parameters**
72
73| Name| Type                                                        | Mandatory| Description                                         |
74| ------ | ------------------------------------------------------------ | ---- | --------------------------------------------- |
75| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Size of the symbol span.<br>Default value: system default value|
76
77### fontWeight
78
79fontWeight(value: number | FontWeight | string)
80
81Sets the weight of the symbol span. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. The default value is **400**. For the string type, only strings of the number type are supported, for example, **"400"**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**.
82
83The **sys.symbol.ohos_lungs** icon does not support font weight setting.
84
85**Widget capability**: This API can be used in ArkTS widgets since API version 12.
86
87**Atomic service API**: This API can be used in atomic services since API version 12.
88
89**System capability**: SystemCapability.ArkUI.ArkUI.Full
90
91**Parameters**
92
93| Name| Type                                                        | Mandatory| Description                                              |
94| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------------- |
95| value  | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | Yes  | Weight of the symbol span.<br>Default value: **FontWeight.Normal**|
96
97### renderingStrategy
98
99renderingStrategy(value: SymbolRenderingStrategy)
100
101Sets the rendering strategy of the symbol span.
102
103**Widget capability**: This API can be used in ArkTS widgets since API version 12.
104
105**Atomic service API**: This API can be used in atomic services since API version 12.
106
107**System capability**: SystemCapability.ArkUI.ArkUI.Full
108
109**Parameters**
110
111| Name| Type                                                        | Mandatory| Description                                                        |
112| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
113| value  | [SymbolRenderingStrategy](ts-basic-components-symbolGlyph.md#symbolrenderingstrategy11) | Yes  | Rendering strategy of the symbol span.<br>Default value: **SymbolRenderingStrategy.SINGLE**|
114
115The figure below shows the effects of different rendering strategies.
116
117![renderingStrategy](figures/renderingStrategy.png)
118
119### effectStrategy
120
121effectStrategy(value: SymbolEffectStrategy)
122
123Sets the symbol effect of the symbol span.
124
125**Widget capability**: This API can be used in ArkTS widgets since API version 12.
126
127**Atomic service API**: This API can be used in atomic services since API version 12.
128
129**System capability**: SystemCapability.ArkUI.ArkUI.Full
130
131**Parameters**
132
133| Name| Type                                                        | Mandatory| Description                                                      |
134| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------------- |
135| value  | [SymbolEffectStrategy](ts-basic-components-symbolGlyph.md#symboleffectstrategy11) | Yes  | Symbol effect of the symbol span.<br>Default value: **SymbolEffectStrategy.NONE**|
136
137### attributeModifier<sup>12+</sup>
138
139attributeModifier(modifier: AttributeModifier\<SymbolSpanAttribute>)
140
141Creates an attribute modifier.
142
143**Atomic service API**: This API can be used in atomic services since API version 12.
144
145**System capability**: SystemCapability.ArkUI.ArkUI.Full
146
147**Parameters**
148
149| Name| Type                                               | Mandatory| Description                                                        |
150| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
151| modifier  | [AttributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifiert)\<SymbolSpanAttribute> | Yes  | Modifier for dynamically setting attributes on the current component.|
152
153## Events
154
155The [universal events](ts-universal-events-click.md) are not supported.
156
157## Example
158
159This example demonstrates different rendering and effect strategies using **renderingStrategy** and **effectStrategy**.
160
161```ts
162// xxx.ets
163@Entry
164@Component
165struct Index {
166  build() {
167    Column() {
168      Row() {
169        Column() {
170          Text("Light")
171          Text() {
172            SymbolSpan($r('sys.symbol.ohos_trash'))
173              .fontWeight(FontWeight.Lighter)
174              .fontSize(96)
175          }
176        }
177
178        Column() {
179          Text("Normal")
180          Text() {
181            SymbolSpan($r('sys.symbol.ohos_trash'))
182              .fontWeight(FontWeight.Normal)
183              .fontSize(96)
184          }
185        }
186
187        Column() {
188          Text("Bold")
189          Text() {
190            SymbolSpan($r('sys.symbol.ohos_trash'))
191              .fontWeight(FontWeight.Bold)
192              .fontSize(96)
193          }
194        }
195      }
196
197      Row() {
198        Column() {
199          Text("Monochrome")
200          Text() {
201            SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
202              .fontSize(96)
203              .renderingStrategy(SymbolRenderingStrategy.SINGLE)
204              .fontColor([Color.Black, Color.Green, Color.White])
205          }
206        }
207
208        Column() {
209          Text("Multicolor")
210          Text() {
211            SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
212              .fontSize(96)
213              .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
214              .fontColor([Color.Black, Color.Green, Color.White])
215          }
216        }
217
218        Column() {
219          Text("Multilayer")
220          Text() {
221            SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
222              .fontSize(96)
223              .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
224              .fontColor([Color.Black, Color.Green, Color.White])
225          }
226        }
227      }
228
229      Row() {
230        Column() {
231          Text("No effect")
232          Text() {
233            SymbolSpan($r('sys.symbol.ohos_wifi'))
234              .fontSize(96)
235              .effectStrategy(SymbolEffectStrategy.NONE)
236          }
237        }
238
239        Column() {
240          Text("Overall scale effect")
241          Text() {
242            SymbolSpan($r('sys.symbol.ohos_wifi'))
243              .fontSize(96)
244              .effectStrategy(1)
245          }
246        }
247
248        Column() {
249          Text("Hierarchical effect")
250          Text() {
251            SymbolSpan($r('sys.symbol.ohos_wifi'))
252              .fontSize(96)
253              .effectStrategy(2)
254          }
255        }
256      }
257    }
258  }
259}
260```
261![SymbolSpan](figures/symbolSpan.gif)
262