@lowdefy/docs-content 0.0.0-experimental-20260928120643 → 6.1.0

package/content/display-blocks/icon.md

@@ -1,152 +1,6 @@
 # Icon
 
-Display a Lucide icon by semantic name (`edit`), Lucide name (`Pencil`) or qualified name (`lucide:Pencil`), with per-icon size, colour and stroke width.
-
-Lowdefy draws icons with [Lucide](https://lucide.dev): about 1,850 stroke icons on a 24px grid. The Icon block renders one icon. Every block property that takes an icon, such as `icon` on a Button or a menu link, takes the same names and the same settings.
-
-## Icon names
-
-An icon name has one of three forms:
-
-| Form      | Example                          | Resolves to                                                                                              |
-| --------- | -------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| Semantic  | `edit`, `chevron-down`           | A built-in name for a common job, lowercase kebab-case. `edit` draws Lucide `Pencil`.                    |
-| Set name  | `Pencil`, `Receipt`              | An icon in the app's default set (`theme.icons.set`, Lucide unless changed), then in Lucide. PascalCase. |
-| Qualified | `lucide:Pencil`, `tabler:Pencil` | That icon in that set only. Use it to reach a set that is not the default.                               |
-
-Use a semantic name when one fits. Blocks and Ant Design components use the same names for their own icons, so `theme.icons.aliases` or an [icon set](/plugins-icon-sets) restyles your icons and the built-in ones together. [Theming](/theming) lists every semantic name.
-
-For anything else, use the Lucide name in PascalCase. Search [lucide.dev/icons](https://lucide.dev/icons), then write the name as the React component name: `circle-dollar-sign` on the site is `CircleDollarSign` in config. Lucide's older alias names, such as `Home` for `House`, also work.
-
-In a running dev server, AI agents can find names with the `lowdefy_search_icons` tool (see [Docs for AI Agents](/ai-agent-docs)).
-
-```yaml
-- id: edit_icon
-  type: Icon
-  properties:
-    name: edit # semantic
-- id: invoice_icon
-  type: Icon
-  properties:
-    name: Receipt # Lucide
-- id: save_button
-  type: Button
-  properties:
-    title: Save
-    icon: save
-```
-
-An unknown icon name in config fails the build, with a suggestion. Old react-icons names such as `AiOutlineUser` fail too; see [V6 to V7](/v6-to-v7) to migrate them.
-
-## Icon settings
-
-Set these on the Icon block, or pass an object instead of a name to any `icon` property:
-
-| Property           | Default | Description                                                                                    |
-| ------------------ | ------- | ---------------------------------------------------------------------------------------------- |
-| `name`             |         | The icon name.                                                                                 |
-| `size`             | `1em`   | Width and height. A number is pixels; a string is any CSS length. `1em` follows the font size. |
-| `color`            |         | CSS colour. It colours stroke and fill icons alike.                                            |
-| `strokeWidth`      | `2`     | Line width, in units of the icon's 24px grid.                                                  |
-| `nonScalingStroke` | `false` | Keep the line width constant in screen pixels at any size.                                     |
-| `rotate`           |         | Degrees to rotate the icon.                                                                    |
-| `spin`             | `false` | Replace the icon with the spinning `loading` icon.                                             |
-| `title`            |         | Hover text, read by screen readers.                                                            |
-
-```yaml
-- id: delete_button
-  type: Button
-  properties:
-    title: Delete
-    danger: true
-    icon:
-      name: delete
-      strokeWidth: 1.5
-- id: status_icon
-  type: Icon
-  properties:
-    name: CircleCheckBig
-    size: 32
-    color: '#16a34a'
-    nonScalingStroke: true
-```
-
-The defaults for `size`, `strokeWidth` and `nonScalingStroke` come from `theme.icons`, so one setting changes every icon in the app. A value on the icon wins over the theme.
-
-## Titles
-
-The Icon block adds a hover title made from the name: `Pencil` gives "Pencil", `ArrowLeftRight` gives "Arrow left right", and `more-vertical` gives "More vertical". A qualified name drops its set prefix. Set `title` to change it, or to an empty string for a decorative icon.
-
-## Names only known at runtime
-
-The build bundles only the icons your config names. A name that comes from state, a request or a database is not in the config, so list it under `theme.icons.include`. In production each page loads only its own icons, so the first such name a page draws loads the rest of the app's icons; the icon keeps its space until they arrive:
-
-```yaml
-theme:
-  icons:
-    include:
-      - Flag
-      - Truck
-```
-
-```yaml
-- id: semantic_add
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: add
-    size: 24
-- id: semantic_edit
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: edit
-    size: 24
-- id: semantic_delete
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: delete
-    size: 24
-- id: semantic_search
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: search
-    size: 24
-- id: semantic_settings
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: settings
-    size: 24
-- id: semantic_warning
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: warning
-    size: 24
-- id: semantic_info
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: info
-    size: 24
-- id: semantic_success
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: success
-    size: 24
-```
+Display icons from the React Icons library.
 
 ```yaml
 - id: icon_home
@@ -154,84 +8,84 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: home
+    name: AiOutlineHome
     size: 24
 - id: icon_search
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: search
+    name: AiOutlineSearch
     size: 24
 - id: icon_user
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: user
+    name: AiOutlineUser
     size: 24
 - id: icon_setting
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: settings
+    name: AiOutlineSetting
     size: 24
 - id: icon_bell
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: bell
+    name: AiOutlineBell
     size: 24
 - id: icon_heart
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: heart
+    name: AiOutlineHeart
     size: 24
 - id: icon_star
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: star
+    name: AiOutlineStar
     size: 24
 - id: icon_check
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: check
+    name: AiOutlineCheck
     size: 24
 - id: icon_close
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: close
+    name: AiOutlineClose
     size: 24
 - id: icon_info
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: info
+    name: AiOutlineInfoCircle
     size: 24
 - id: icon_warning
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: warning
+    name: AiOutlineWarning
     size: 24
 - id: icon_mail
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: mail
+    name: AiOutlineMail
     size: 24
 ```
 
@@ -241,35 +95,35 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Rocket
+    name: AiOutlineRocket
     size: 16
 - id: size_24
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: Rocket
+    name: AiOutlineRocket
     size: 24
 - id: size_32
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: Rocket
+    name: AiOutlineRocket
     size: 32
 - id: size_48
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: Rocket
+    name: AiOutlineRocket
     size: 48
 - id: size_64
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: Rocket
+    name: AiOutlineRocket
     size: 64
 ```
 
@@ -279,7 +133,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: heart
+    name: AiOutlineHeart
     size: 32
     color: red
 - id: color_blue
@@ -287,7 +141,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: heart
+    name: AiOutlineHeart
     size: 32
     color: blue
 - id: color_green
@@ -295,7 +149,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: heart
+    name: AiOutlineHeart
     size: 32
     color: green
 - id: color_orange
@@ -303,7 +157,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: heart
+    name: AiOutlineHeart
     size: 32
     color: orange
 - id: color_purple
@@ -311,7 +165,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: heart
+    name: AiOutlineHeart
     size: 32
     color: purple
 - id: color_tomato
@@ -319,7 +173,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: heart
+    name: AiOutlineHeart
     size: 32
     color: tomato
 - id: color_teal
@@ -327,7 +181,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: heart
+    name: AiOutlineHeart
     size: 32
     color: teal
 - id: color_coral
@@ -335,7 +189,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: heart
+    name: AiOutlineHeart
     size: 32
     color: coral
 ```
@@ -346,7 +200,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 40
     color: "#1677ff"
 - id: hex_green
@@ -354,7 +208,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 40
     color: "#52c41a"
 - id: hex_red
@@ -362,7 +216,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 40
     color: "#f5222d"
 - id: hex_orange
@@ -370,7 +224,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 40
     color: "#fa8c16"
 - id: hex_purple
@@ -378,7 +232,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 40
     color: "#722ed1"
 - id: hex_cyan
@@ -386,7 +240,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 40
     color: "#13c2c2"
 - id: hex_coral
@@ -394,7 +248,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 40
     color: "#ff6b6b"
 - id: hex_indigo
@@ -402,7 +256,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 40
     color: "#4c6ef5"
 - id: hex_pink
@@ -410,7 +264,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 40
     color: "#e64980"
 - id: hex_amber
@@ -418,7 +272,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 40
     color: "#fab005"
 ```
@@ -429,7 +283,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: loading
+    name: AiOutlineLoading
     size: 32
     spin: true
     color: "#1677ff"
@@ -438,7 +292,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: loading
+    name: AiOutlineLoading3Quarters
     size: 32
     spin: true
     color: "#52c41a"
@@ -447,7 +301,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: RefreshCw
+    name: AiOutlineSync
     size: 32
     spin: true
     color: "#fa8c16"
@@ -456,7 +310,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: settings
+    name: AiOutlineSetting
     size: 32
     spin: true
     color: "#722ed1"
@@ -465,7 +319,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: refresh
+    name: AiOutlineReload
     size: 32
     spin: true
     color: "#f5222d"
@@ -477,7 +331,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: arrow-up
+    name: AiOutlineArrowUp
     size: 32
     rotate: 0
     color: "#1677ff"
@@ -486,7 +340,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: arrow-up
+    name: AiOutlineArrowUp
     size: 32
     rotate: 45
     color: "#1677ff"
@@ -495,7 +349,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: arrow-up
+    name: AiOutlineArrowUp
     size: 32
     rotate: 90
     color: "#1677ff"
@@ -504,7 +358,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: arrow-up
+    name: AiOutlineArrowUp
     size: 32
     rotate: 135
     color: "#1677ff"
@@ -513,7 +367,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: arrow-up
+    name: AiOutlineArrowUp
     size: 32
     rotate: 180
     color: "#1677ff"
@@ -522,54 +376,19 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: arrow-up
+    name: AiOutlineArrowUp
     size: 32
     rotate: 270
     color: "#1677ff"
 ```
 
-```yaml
-- id: stroke_width_1
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: heart
-    size: 32
-    strokeWidth: 1
-- id: stroke_width_2
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: heart
-    size: 32
-    strokeWidth: 2
-- id: stroke_width_3
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: heart
-    size: 32
-    strokeWidth: 3
-- id: non_scaling_stroke
-  type: Icon
-  layout:
-    flex: 0 0 auto
-  properties:
-    name: heart
-    size: 64
-    nonScalingStroke: true
-```
-
 ```yaml
 - id: title_info
   type: Icon
   layout:
     flex: 0 0 auto
   properties:
-    name: info
+    name: AiOutlineInfoCircle
     size: 32
     color: "#1677ff"
     title: More information
@@ -578,7 +397,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: warning
+    name: AiOutlineWarning
     size: 32
     color: "#faad14"
     title: Warning - proceed with caution
@@ -587,7 +406,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: help
+    name: AiOutlineQuestionCircle
     size: 32
     color: "#722ed1"
     title: Click for help
@@ -612,7 +431,7 @@ theme:
       layout:
         flex: 0 0 auto
       properties:
-        name: Cloud
+        name: AiOutlineCloud
         size: 40
         color: "#69b1ff"
 - id: dark_bg_green
@@ -633,7 +452,7 @@ theme:
       layout:
         flex: 0 0 auto
       properties:
-        name: check-circle
+        name: AiOutlineCheckCircle
         size: 40
         color: "#95de64"
 - id: dark_bg_red
@@ -654,7 +473,7 @@ theme:
       layout:
         flex: 0 0 auto
       properties:
-        name: close-circle
+        name: AiOutlineCloseCircle
         size: 40
         color: "#ff7875"
 - id: dark_bg_purple
@@ -675,7 +494,7 @@ theme:
       layout:
         flex: 0 0 auto
       properties:
-        name: star
+        name: AiOutlineStar
         size: 40
         color: "#b37feb"
 ```
@@ -700,7 +519,7 @@ theme:
       layout:
         flex: 0 0 auto
       properties:
-        name: check-circle
+        name: AiOutlineCheckCircle
         size: 36
         color: "#52c41a"
 - id: colored_bg_warning
@@ -722,7 +541,7 @@ theme:
       layout:
         flex: 0 0 auto
       properties:
-        name: CircleAlert
+        name: AiOutlineExclamationCircle
         size: 36
         color: "#faad14"
 - id: colored_bg_error
@@ -744,7 +563,7 @@ theme:
       layout:
         flex: 0 0 auto
       properties:
-        name: close-circle
+        name: AiOutlineCloseCircle
         size: 36
         color: "#ff4d4f"
 - id: colored_bg_info
@@ -766,7 +585,7 @@ theme:
       layout:
         flex: 0 0 auto
       properties:
-        name: info
+        name: AiOutlineInfoCircle
         size: 36
         color: "#1677ff"
 ```
@@ -782,7 +601,7 @@ theme:
       padding: 12
       borderRadius: 50%
   properties:
-    name: user
+    name: AiOutlineUser
     size: 32
     color: "#1677ff"
 - id: style_bordered
@@ -795,7 +614,7 @@ theme:
       padding: 10
       borderRadius: 8
   properties:
-    name: settings
+    name: AiOutlineSetting
     size: 28
     color: "#595959"
 - id: style_shadow
@@ -809,7 +628,7 @@ theme:
       borderRadius: 12
       boxShadow: 0 2px 8px rgba(0, 0, 0, 0.15)
   properties:
-    name: bell
+    name: AiOutlineBell
     size: 30
     color: "#fa8c16"
 - id: style_gradient_bg
@@ -822,7 +641,7 @@ theme:
       padding: 14
       borderRadius: 12
   properties:
-    name: Zap
+    name: AiOutlineThunderbolt
     size: 30
     color: "#ffffff"
 - id: style_circle_bg
@@ -838,7 +657,7 @@ theme:
       alignItems: center
       justifyContent: center
   properties:
-    name: heart
+    name: AiOutlineHeart
     size: 24
     color: "#ffffff"
 ```
@@ -857,7 +676,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: edit
+    name: AiOutlineEdit
     size: 32
     color: "#1677ff"
     disableLoadingIcon: false
@@ -870,7 +689,7 @@ theme:
   layout:
     flex: 0 0 auto
   properties:
-    name: edit
+    name: AiOutlineEdit
     size: 32
     color: "#1677ff"
     disableLoadingIcon: true
@@ -879,18 +698,16 @@ theme:
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `color` | string | - | Primary icon color. |
-| `name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. Add your own semantic names with `theme.icons.aliases`. |
-| `nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
+| `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. |
-| `strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
 | `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. The icon then takes keyboard focus, and Enter or Space trigger it too. |
+| `onClick` | \- | Trigger actions when icon is clicked. |
 
 | Key | Target |
 | --- | --- |