@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/display-blocks/icon.md

@@ -0,0 +1,717 @@
+# Icon
+
+Display icons from the React Icons library.
+
+```yaml
+- id: icon_home
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineHome
+    size: 24
+- id: icon_search
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineSearch
+    size: 24
+- id: icon_user
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineUser
+    size: 24
+- id: icon_setting
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineSetting
+    size: 24
+- id: icon_bell
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineBell
+    size: 24
+- id: icon_heart
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineHeart
+    size: 24
+- id: icon_star
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineStar
+    size: 24
+- id: icon_check
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineCheck
+    size: 24
+- id: icon_close
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineClose
+    size: 24
+- id: icon_info
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineInfoCircle
+    size: 24
+- id: icon_warning
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineWarning
+    size: 24
+- id: icon_mail
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineMail
+    size: 24
+```
+
+```yaml
+- id: size_16
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineRocket
+    size: 16
+- id: size_24
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineRocket
+    size: 24
+- id: size_32
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineRocket
+    size: 32
+- id: size_48
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineRocket
+    size: 48
+- id: size_64
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineRocket
+    size: 64
+```
+
+```yaml
+- id: color_red
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineHeart
+    size: 32
+    color: red
+- id: color_blue
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineHeart
+    size: 32
+    color: blue
+- id: color_green
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineHeart
+    size: 32
+    color: green
+- id: color_orange
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineHeart
+    size: 32
+    color: orange
+- id: color_purple
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineHeart
+    size: 32
+    color: purple
+- id: color_tomato
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineHeart
+    size: 32
+    color: tomato
+- id: color_teal
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineHeart
+    size: 32
+    color: teal
+- id: color_coral
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineHeart
+    size: 32
+    color: coral
+```
+
+```yaml
+- id: hex_blue
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineThunderbolt
+    size: 40
+    color: "#1677ff"
+- id: hex_green
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineThunderbolt
+    size: 40
+    color: "#52c41a"
+- id: hex_red
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineThunderbolt
+    size: 40
+    color: "#f5222d"
+- id: hex_orange
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineThunderbolt
+    size: 40
+    color: "#fa8c16"
+- id: hex_purple
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineThunderbolt
+    size: 40
+    color: "#722ed1"
+- id: hex_cyan
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineThunderbolt
+    size: 40
+    color: "#13c2c2"
+- id: hex_coral
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineThunderbolt
+    size: 40
+    color: "#ff6b6b"
+- id: hex_indigo
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineThunderbolt
+    size: 40
+    color: "#4c6ef5"
+- id: hex_pink
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineThunderbolt
+    size: 40
+    color: "#e64980"
+- id: hex_amber
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineThunderbolt
+    size: 40
+    color: "#fab005"
+```
+
+```yaml
+- id: spin_loading
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineLoading
+    size: 32
+    spin: true
+    color: "#1677ff"
+- id: spin_loading3q
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineLoading3Quarters
+    size: 32
+    spin: true
+    color: "#52c41a"
+- id: spin_sync
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineSync
+    size: 32
+    spin: true
+    color: "#fa8c16"
+- id: spin_setting
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineSetting
+    size: 32
+    spin: true
+    color: "#722ed1"
+- id: spin_reload
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineReload
+    size: 32
+    spin: true
+    color: "#f5222d"
+```
+
+```yaml
+- id: rotate_0
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineArrowUp
+    size: 32
+    rotate: 0
+    color: "#1677ff"
+- id: rotate_45
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineArrowUp
+    size: 32
+    rotate: 45
+    color: "#1677ff"
+- id: rotate_90
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineArrowUp
+    size: 32
+    rotate: 90
+    color: "#1677ff"
+- id: rotate_135
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineArrowUp
+    size: 32
+    rotate: 135
+    color: "#1677ff"
+- id: rotate_180
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineArrowUp
+    size: 32
+    rotate: 180
+    color: "#1677ff"
+- id: rotate_270
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineArrowUp
+    size: 32
+    rotate: 270
+    color: "#1677ff"
+```
+
+```yaml
+- id: title_info
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineInfoCircle
+    size: 32
+    color: "#1677ff"
+    title: More information
+- id: title_warning
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineWarning
+    size: 32
+    color: "#faad14"
+    title: Warning - proceed with caution
+- id: title_help
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineQuestionCircle
+    size: 32
+    color: "#722ed1"
+    title: Click for help
+```
+
+```yaml
+- id: dark_bg_blue
+  type: Box
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#1a1a2e"
+      padding: 16
+      borderRadius: 8
+      display: flex
+      alignItems: center
+      justifyContent: center
+  blocks:
+    - id: dark_icon_blue
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: AiOutlineCloud
+        size: 40
+        color: "#69b1ff"
+- id: dark_bg_green
+  type: Box
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#0d2818"
+      padding: 16
+      borderRadius: 8
+      display: flex
+      alignItems: center
+      justifyContent: center
+  blocks:
+    - id: dark_icon_green
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: AiOutlineCheckCircle
+        size: 40
+        color: "#95de64"
+- id: dark_bg_red
+  type: Box
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#2a1215"
+      padding: 16
+      borderRadius: 8
+      display: flex
+      alignItems: center
+      justifyContent: center
+  blocks:
+    - id: dark_icon_red
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: AiOutlineCloseCircle
+        size: 40
+        color: "#ff7875"
+- id: dark_bg_purple
+  type: Box
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#1a0a2e"
+      padding: 16
+      borderRadius: 8
+      display: flex
+      alignItems: center
+      justifyContent: center
+  blocks:
+    - id: dark_icon_purple
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: AiOutlineStar
+        size: 40
+        color: "#b37feb"
+```
+
+```yaml
+- id: colored_bg_success
+  type: Box
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#f6ffed"
+      border: 1px solid
+      padding: 16
+      borderRadius: 8
+      display: flex
+      alignItems: center
+      justifyContent: center
+  blocks:
+    - id: colored_icon_success
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: AiOutlineCheckCircle
+        size: 36
+        color: "#52c41a"
+- id: colored_bg_warning
+  type: Box
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#fffbe6"
+      border: 1px solid
+      padding: 16
+      borderRadius: 8
+      display: flex
+      alignItems: center
+      justifyContent: center
+  blocks:
+    - id: colored_icon_warning
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: AiOutlineExclamationCircle
+        size: 36
+        color: "#faad14"
+- id: colored_bg_error
+  type: Box
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#fff2f0"
+      border: 1px solid
+      padding: 16
+      borderRadius: 8
+      display: flex
+      alignItems: center
+      justifyContent: center
+  blocks:
+    - id: colored_icon_error
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: AiOutlineCloseCircle
+        size: 36
+        color: "#ff4d4f"
+- id: colored_bg_info
+  type: Box
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#e6f4ff"
+      border: 1px solid
+      padding: 16
+      borderRadius: 8
+      display: flex
+      alignItems: center
+      justifyContent: center
+  blocks:
+    - id: colored_icon_info
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: AiOutlineInfoCircle
+        size: 36
+        color: "#1677ff"
+```
+
+```yaml
+- id: style_padded
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#f0f5ff"
+      padding: 12
+      borderRadius: 50%
+  properties:
+    name: AiOutlineUser
+    size: 32
+    color: "#1677ff"
+- id: style_bordered
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      border: 2px solid
+      padding: 10
+      borderRadius: 8
+  properties:
+    name: AiOutlineSetting
+    size: 28
+    color: "#595959"
+- id: style_shadow
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#ffffff"
+      padding: 14
+      borderRadius: 12
+      boxShadow: 0 2px 8px rgba(0, 0, 0, 0.15)
+  properties:
+    name: AiOutlineBell
+    size: 30
+    color: "#fa8c16"
+- id: style_gradient_bg
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: linear-gradient(135deg,
+      padding: 14
+      borderRadius: 12
+  properties:
+    name: AiOutlineThunderbolt
+    size: 30
+    color: "#ffffff"
+- id: style_circle_bg
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  style:
+    .element:
+      background: "#ff4d4f"
+      padding: 12
+      borderRadius: 50%
+      display: flex
+      alignItems: center
+      justifyContent: center
+  properties:
+    name: AiOutlineHeart
+    size: 24
+    color: "#ffffff"
+```
+
+**disableLoadingIcon: false (default):**
+
+**disableLoadingIcon: true:**
+
+```yaml
+- id: disable_loading_false_label
+  type: Markdown
+  properties:
+    content: "**disableLoadingIcon: false (default):**"
+- id: disable_loading_default
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineEdit
+    size: 32
+    color: "#1677ff"
+    disableLoadingIcon: false
+- id: disable_loading_true_label
+  type: Markdown
+  properties:
+    content: "**disableLoadingIcon: true:**"
+- id: disable_loading_true
+  type: Icon
+  layout:
+    flex: 0 0 auto
+  properties:
+    name: AiOutlineEdit
+    size: 32
+    color: "#1677ff"
+    disableLoadingIcon: true
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `color` | string | - | Primary icon color. |
+| `name` | string | `"AiOutlineCloseCircle"` | Name of icon to be displayed. |
+| `rotate` | number | - | Number of degrees to rotate the icon. |
+| `size` | string \| number | - | Size of the icon. |
+| `spin` | boolean | `false` | Continuously spin icon with animation. |
+| `title` | string | - | Icon hover title for accessibility. |
+| `disableLoadingIcon` | boolean | `false` | While loading after the icon has been clicked, don't render the loading icon. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onClick` | \- | Trigger actions when icon is clicked. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Icon element. |
+
+No slots defined.