# アイコン

> アプリのアイコンライブラリの印を、選んだ色と大きさで描きます。Logic の変数で動かすこともできます。

**アイコン** は、アプリのアイコンライブラリの印を 1 つ描きます。名前の付いた記号がおよそ 2,770 個あり、ボタンの表面、状態ランプの状態、画面自身の印が選ぶのと同じ一組です。取り込んだ自分のアイコンの素材も使えます。この印は固定にすることも、2 つの可変部（記号と色）のどちらかを Logic の変数に追従させることもできるので、弁のシンボルが印を切り替えたり、表示灯が現場の動きに合わせて色を変えたりできます。*メディア* のコンポーネントで、新しく置くと 2 × 2 のます目を占めます。

## 内容 {#content}

| 欄 | 何をするか | 値 | 既定 |
|---|---|---|---|
| アイコン（名前かタグで検索） | 下の記号の格子を、ライブラリの名前と、選び抜かれた検索用のタグ（「英語で：wifi、save、warning…」）で絞ります。アプリのどの選択画面も同じようにライブラリを検索するので、1 か所で見つかった印は、どこでも見つかります。 | 自由なテキスト | 空 |
| 記号の格子 | ます目を押して選ぶ既定の記号です。固定で表示され、バインドした変数が何も解決しないときの戻り先にもなります。 | ライブラリのどの記号でも | 星の記号 |

取り込んだアイコンの *素材*（Logic ▸ Assets ▸ Icons にある、1 本のパスの SVG）も記号の可変部に置けます。同じ箱に、同じ指定した大きさで描かれ、色を受け継ぐところでは同じ文字色を取ります。自分で色を塗る図は、自分の色を保ちます。

## データ {#data}

どちらのバインドも、それが表すものとしてパネルの中で自分を確かめます。バインドした変数の今の印はステーションのフォントで描かれ、バインドした色は 16 進数の隣に塗られます。書き出したコードポイントは豆腐の四角にしかならず、16 進数は誰も思い描けない言葉だからです。

| 欄 | 何をするか | 値 | 既定 |
|---|---|---|---|
| アイコンの変数のグリフ | アイコンを返す Logic の変数の、根の付いたアドレスです。一覧は各変数をその名前で、フォルダーに入っている変数はフォルダーと名前で（Oven / Mark）示し、そのフォルダーを含むアドレス（`Variables.Oven.Mark`）を保存します。バインドすると、記号の可変部は、その変数が解決する印にそのまま追従します。値から記号を決める判断は変数の側にあり、ここにはありません（[Logic のページ](logic) を参照）。`（なし）` はバインドを解き、可変部を固定の記号に戻します。 | アイコンの変数、または `（なし）` | `（なし）` |
| 色の変数の色 | 色を返す Logic の変数の、根の付いたアドレスで、同じように色の可変部を動かします。記号の可変部とは独立なので、固定の記号にロジックで動く色を与えることも、その逆もできます。 | 色の変数、または `（なし）` | `（なし）` |

バインドした可変部が読めない（解決しないアドレス、または品質不良）ときは、変数の古い値を描く代わりに設定した既定を保ち、コンポーネントは共通の読み取り不良の印を身に着けます。バインドした色は、画面に届く前に安全な塗りとして検査されます。色でない文字が来たときは、設定した色がそのまま効きます。

## 色と大きさ {#color-and-size}

| 欄 | 何をするか | 値 | 既定 |
|---|---|---|---|
| 色 | 記号の色を 16 進数で指定します。空欄にすると、すでにライトとダークに応じているテーマ自身の前景色に従います。 | `#RRGGBB`、または空欄 | 空欄（テーマの色） |
| 大きさ | 装置に依存しないピクセルでの記号の大きさです。同じ数値が SVG の素材の箱の大きさも決めるので、2 種類の印は同じようにこの欄に応じます。 | 任意の数値 | 40 |

## 詳細 {#advanced}

| 欄 | 何をするか | 値 | 既定 |
|---|---|---|---|
| グリフのコード（詳細） | 選択画面の背後にある、記号そのものの文字列です。コードポイントを直接貼り付けるためのものです。 | そのままのテキスト | 選んだ記号 |

アイコンは表示のコンポーネントです。何も指令せず、錠前の印を身に着けることもありません。共通の外観、識別、位置とレイヤー、アクションの節は [コンポーネントのページ](components#the-shared-property-sections) で説明しています。