WIcon 图标组件

A2UI Protocol JSON Schema

图标组件，基于 WinDesignNext WIcon 封装，用于显示图标。图标名称来自 @win-design-next/icons-vue。

基础用法

Props API

属性名	类型	默认值	说明
id	string	-	组件唯一标识（必填）
component	string	WIcon	组件类型（必填）
name	string	object	-
color	string	object	-
size	string	number	object

path 支持说明

通用绑定格式见 path 数据绑定速查。

属性	支持 path	说明
name	✅	动态图标名称（dataModel 或 @row.icon）
color	✅	动态图标颜色
size	✅	动态图标尺寸

dataModel 路径示例：

{ "name": { "path": "/statusIcon" }, "color": "#409EFF", "size": 20 }

列表模板作用域示例：

{ "name": { "path": "@row.icon" }, "color": { "path": "@row.iconColor" } }

name 图标名称

name 对应 @win-design-next/icons-vue 中的图标组件名称，如：

name	说明
Edit	编辑
Delete	删除

更多图标请参考 @win-design-next/icons-vue 文档。

使用示例

固定图标

{
  "id": "icon_edit",
  "component": "WIcon",
  "name": "Edit",
  "color": "#409EFF",
  "size": 20
}

数据驱动图标

在列表、单选框、复选框等数据驱动场景中，name、color、size 可通过数据绑定动态设置：

{
  "id": "status-icon",
  "component": "WIcon",
  "name": { "path": "@row.icon" },
  "color": { "path": "@row.iconColor" },
  "size": 20
}

对应数据：

[
  { "label": "已完成", "icon": "Check", "iconColor": "#67C23A" },
  { "label": "进行中", "icon": "Edit", "iconColor": "#409EFF" },
  { "label": "已驳回", "icon": "Close", "iconColor": "#F56C6C" }
]

与其他组件组合使用

图标常与 WSpace、WTag 等组合使用：

[
  {
    "id": "action-space",
    "component": "WSpace",
    "direction": "horizontal",
    "size": "small",
    "align": "center",
    "children": ["icon_edit", "icon_delete"]
  },
  {
    "id": "icon_edit",
    "component": "WIcon",
    "name": "Edit",
    "color": "#409EFF",
    "size": 16
  },
  {
    "id": "icon_delete",
    "component": "WIcon",
    "name": "Delete",
    "color": "#F56C6C",
    "size": 16
  }
]