アイコン

隣接したテキストを装飾するためのアイコンを表示するコンポーネントです。このコンポーネントは、ベースラインボックス 内でのみ使用できます。

Request Content {#icon-request-parameter}

パラメータタイプ説明
typestring"icon"
required
urlstring画像の URL (PNG 形式、HTTPS のみ可能)

最大文字数:1,000 文字
required
marginstring親要素内での、特定のコンポーネントとその前のコンポーネントとの間に挿入される余白の最小サイズ
詳しくは、レイアウト > コンポーネントの margin プロパティ を参照してください。
positionstringoffsetTop、offsetBottom、offsetStart、offsetEnd の基準
以下のいずれかの値を指定します。

• relative : 直前のボックスを基準とします。
• absolute : 親要素の左上を基準とします。

デフォルト値は relative です。
詳しくは、レイアウト > オフセット を参照してください。
offsetTopstring上側のオフセット
詳しくは、レイアウト > オフセット を参照してください。
offsetBottomstring下側のオフセット
詳しくは、レイアウト > オフセット を参照してください。
offsetStartstring左側のオフセット
詳しくは、レイアウト > オフセット を参照してください。
offsetEndstring右側のオフセット
詳しくは、レイアウト > オフセット を参照してください。
sizestringアイコンの最大幅
xxs、xs、sm、md、lg、xl、xxl、3xl、4xl、5xl のいずれかの値を指定できます。
列挙した順にアイコンのサイズが大きくなります。

デフォルト値は md です。
aspectRatiostringアイコンのアスペクト比
{width}:{height} の形で指定します。
{width} および {height} の値は 1 から 100,000 の範囲で指定します。
ただし、{height} 値は {width} 値の 3 倍を超えることはできません。

デフォルト値は 1:1 です。

※ アイコンの flex プロパティの値は 0 に固定されます。

Request Example {#icon-request-example}

{  "type": "bubble",  "body": {    "type": "box",    "layout": "vertical",    "contents": [      {        "type": "box",        "layout": "baseline",        "contents": [          {            "type": "icon",            "url": "https://developers.worksmobile.com/image/en/bot/message_type/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://developers.worksmobile.com/image/en/bot/message_type/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://developers.worksmobile.com/image/en/bot/message_type/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://developers.worksmobile.com/image/en/bot/message_type/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://developers.worksmobile.com/image/en/bot/message_type/icon.png",            "size": "3xl"          },          {            "type": "text",            "text": "How may I help you?",            "size": "3xl",            "margin": "sm"          }        ]      }    ]  }}