Icon

    This component renders an icon for decorating the adjacent text and it can be used only in a baseline box.

    API Type

    Server API

    Request URL

    https://apis.worksmobile.com/r/{API ID}/message/v1/bot/{botNo}/message/push

    HTTP Method

    POST(Content-Type: application/json; charset=UTF-8)

    Request

    Parameter Type Required Description
    type string Y Set this parameter to icon.
    url string N URL of an original image (PNG format recommended, HTTPS only)
    Max: 1000 characters
    margin string N Minimum space between this component and the previous component in the parent element. For more information, see margin property of the component in “How to Place Components and Adjust Child Components.”
    position string N Reference for offsetTop, offsetBottom, offsetStart, and offsetEnd. Specify one of the following values:

    relative : Use the previous box as reference.
    absolute : Use the top left of parent element as reference.

    The default value is relative. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetTop string N The top offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetBottom string N The bottom offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetStart string N The left offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    offsetEnd string N The right offset. For more information, see Offset in “How to Place Components and Adjust Child Components.”
    size string N Maximum size of the icon width.
    You can specify one of the following values: xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, or 5xl.
    The size increases in the order of listing.

    The default value is md.
    aspectRatio string N Aspect ratio of the icon. {width}:{height} format.
    Specify the value of {width} and {height} in the range from 1 to 100000.
    However, you cannot set {height} to a value that is more than three times the value of {width}.

    The default value is 1:1.

    ※ The icon's flex property is fixed to 0.

    Request Example

    
    {
      "type": "bubble",
      "body": {
        "type": "box",
        "layout": "vertical",
        "contents": [
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "icon",
                "url": "https://i.ibb.co/Gv6ys3z/icon.png",
                "size": "md"
              },
              {
                "type": "text",
                "text": "How may I help you?",
                "size": "md",
                "margin": "sm"
              }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "icon",
                "url": "https://i.ibb.co/Gv6ys3z/icon.png",
                "size": "lg"
              },
              {
                "type": "text",
                "text": "How may I help you?",
                "size": "lg",
                "margin": "sm"
              }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "icon",
                "url": "https://i.ibb.co/Gv6ys3z/icon.png",
                "size": "xl"
              },
              {
                "type": "text",
                "text": "How may I help you?",
                "size": "xl",
                "margin": "sm"
              }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "icon",
                "url": "https://i.ibb.co/Gv6ys3z/icon.png",
                "size": "xxl"
              },
              {
                "type": "text",
                "text": "How may I help you?",
                "size": "xxl",
                "margin": "sm"
              }
            ]
          },
          {
            "type": "box",
            "layout": "baseline",
            "contents": [
              {
                "type": "icon",
                "url": "https://i.ibb.co/Gv6ys3z/icon.png",
                "size": "3xl"
              },
              {
                "type": "text",
                "text": "How may I help you?",
                "size": "3xl",
                "margin": "sm"
              }
            ]
          }
        ]
      }
    }