> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coze.cn/llms.txt
> Use this file to discover all available pages before exploring further.

图标组件用于展示一个图标，增强界面的视觉效果和交互性。
## 属性设置 {#e759f76a}
图标组件支持丰富的属性设置，例如常用设置、位置设置、尺寸设置、样式设置、变换设置、状态设置和可见性设置。
### 常用设置 {#bf1495b1}
<!-- @cols-width: 140,712 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|来源 |配置图标的来源，支持从本地上传和从图标库选择图标。 |\
| | |\
| |* 本地上传：支持上传`.png` 和`.jpg `格式的图标，但目前不支持 `.svg` 格式，上传的图标最大不超过 5M。 |\
| |* 图标库选择图标：可从图标库选择`.svg`格式的图标。 |
| | | \
|图标颜色 |图标库的图标支持颜色配置，本地上传的图标配置颜色后不生效。 |

### 位置设置 {#2c71273c}
图标组件提供三种位置类型选项，以灵活配置组件在界面中的位置。

* 相对定位：堆叠布局下，元素自动向下或向右排列。
* 绝对定位：页面滚动时，绝对定位的元素会随页面一起滚动。
* 固定定位：页面滚动时，固定定位的元素会保持固定位置不变。

### 尺寸设置 {#44b79a5e}
图标组件支持固定方式设置宽度的像素值，默认为 24px。
### **样式设置** {#30d07de5}
<!-- @cols-width: 140,712 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|背景色 |配置图标组件背景的显示颜色。 |
| | | \
|圆角 |配置图标组件背景的圆角，支持单独设置四个角的圆角。 |
| | | \
|内边距 |配置图标组件背景的内边距，可以单独设置四个方向的内边距。 |
| | | \
|外边距 |配置图标组件背景的外边距，可以单独设置四个方向的外边距。 |
| | | \
|边框 |配置图标组件背景的边框样式。支持如下设置方式： |\
| | |\
| |* 预设样式：提供预设的边框样式，可直接使用。 |\
| |* 自定义样式：通过边框线的颜色、粗细和样式，自定义边框样式。 |
| | | \
|阴影 |配置图标组件背景的阴影样式，增强组件的立体感。支持如下设置方式： |\
| | |\
| |* 预设样式：提供预设的阴影样式，可直接使用。 |\
| |* 自定义样式：支持通过样式、X偏移、Y偏移、模糊半径、扩展半径、颜色，自定义阴影样式。 |
| | | \
|图层模糊 |配置图标组件的模糊效果。数值越大，模糊效果越明显。 |

### 变换设置 {#bebdb78c}
丰富界面视觉效果的参数。
<!-- @cols-width: 138,707 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|缩放 |配置图标组件大小的缩放比例。 |
| | | \
|旋转 |配置图标组件围绕中心点旋转的角度。 |
| | | \
|位移 |配置图标组件在水平和垂直方向上的移动距离。 |
| | | \
|倾斜 |配置图标组件在水平和垂直方向上的倾斜角度。 |

### 状态设置 {#44d9a243}
控制图标组件点击态和出现态的视觉效果参数。
<!-- @cols-width: 137,702 -->
| | | \
|**属性** |**说明** |
|---|---|
| | | \
|点击效果 |配置图标组件的点击态效果。具体配置说明如下： |\
| | |\
| |* 样式效果：点击图标组件时，图标组件的样式变化情况。详细说明，请参考[样式设置](/guides/icon_mini_program#30d07de5)。 |\
| |* 变换效果：点击图标组件时，图标组件的动态变化情况。详细说明，请参考[变换设置](/guides/icon_mini_program#bebdb78c)。 |\
| |* 过渡效果：设置图标组件点击态的动画效果。 |\
| |   * 动画效果：支持设置为缓入缓出、缓入、缓出、线性等动画。 |\
| |   * 持续时间：设置动画的持续时间，单位为毫秒。 |\
| |   * 延迟时间：设置动画延迟出现的时间，单位为毫秒。 |\
| |   * 生效范围：设置动画的生效范围。 |\
| |      * 应用于全部变化：动画效果将应用于样式设置和变换设置所产生的所有变化。 |\
| |      * 仅应用于变换效果：动画效果仅应用于变换设置所产生的变化。 |
| | | \
|出场效果 |设置图标组件在界面中出现时的动画效果。目前支持设置为淡入、缩放、模糊、水平翻转、垂直翻转、从下滑入、从上滑入、从左滑入、从右滑入等动画效果。 |

### **可见性设置** {#c0302a29}
控制图标组件隐藏或显示的参数，支持在特定条件下隐藏图标组件。

* 设置为 false：显示组件。
* 设置为 true：隐藏组件。
* 设置为变量：通过变量值（true 或 false）动态控制图标组件的可见性。
   例如可以通过单行输入组件控制图标组件的可见性。单行输入组件 ID 为 `Input1`，当你将图标组件的**可见性**设置为`{{ Input1.value}}`后，在单行输入组件中输入文本时，`{{ Input1.value}}`值为 true，图标组件将被隐藏。

## 事件设置 {#ddba1bf9}
通过配置图标组件的事件，可以为图标组件添加丰富的交互功能，例如点击、加载等，以增强用户体验和界面的互动性。
<!-- @cols-width: 148,709 -->
| | | \
|**事件项** |**说明** |
|---|---|
| | | \
|事件类型 |支持以下事件类型： |\
| | |\
| |* 点击时：当用户点击组件时触发。 |\
| |* 加载时：当组件完成加载时触发。 |
| | | \
|组件方法 |设置隐藏：隐藏组件，使其不可见。 |