Skip to main content

图标

图标组件用于在页面中展示单个图标，可调整图标标识、字号与颜色，常用于装饰、状态标识或配合文字使用。

概述​

将「图标」拖入画布后，在属性抽屉中选择图标、设置字号与颜色。图标来源于平台内置的图标库。

配置项​

配置项说明
图标从图标库中选择一个图标
图标大小图标字号（px），取值 10 ~ 50，默认 20
颜色图标颜色，取十六进制色值

使用建议​

  1. 作为状态标识时，颜色建议与语义一致（成功用绿色、警告用橙色）。
  2. 需要在按钮上使用图标时，直接使用 功能按钮 的图标配置，无需单独放置图标组件。

下一步​

属性明细​

以下内容面向技术实现与 AI 检索。所有 meta 键值均以字符串形式存储。

组件属性（meta）​

属性名类型含义取值/存储值
Iconstring图标标识平台图标库中的图标名，如 SmileOutlined
FontSizestring(number)图标字号（px）10 ~ 50，默认 20
Colorstring图标颜色十六进制色值，如 #1677ff，默认空

GetSidebarItemMeta() 默认写入 FontSize（20），Icon 与 Color 在用户配置后写入。渲染时读取的图标键为 Icon。uid 固定为 561c86df-ad26-40cc-b56d-37d0b26c9523。

存储示例​

组件通常位于列（Column）内，以下为嵌套在行（Row）→ 列（Column）中的完整存储结构：

{
  "id": "b8c9d0e1-0001-4a2b-8c3d-1234567890ab",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": {
    "ColumnSpace": "5"
  },
  "children": [
    {
      "id": "b8c9d0e1-0002-4a2b-8c3d-1234567890ab",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": [
        {
          "id": "b8c9d0e1-0003-4a2b-8c3d-1234567890ab",
          "uid": "561c86df-ad26-40cc-b56d-37d0b26c9523",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "Icon",
          "widgetTypeName": "图标",
          "meta": {
            "Icon": "SmileOutlined",
            "FontSize": "20",
            "Color": "#1677ff"
          },
          "children": []
        }
      ]
    }
  ]
}