# アイコン

> アイコンのライブラリ。Fluent UI System Icons のカタログと自分の SVG のアイコン、名前かタグでの検索、検査、SVG のマークアップからのアイコンの作成と編集、無害化が残すものと取り除くもの、そしてアイコンの使われ先。

**Icons** は、Assets の最上位の下の 2 つ目の分類です。製品が同梱する Fluent UI System Icons のカタログのすべてのグリフに、SVG のマークアップから自分で組み立てたアイコンを足したものです。パネルの見出しは「アイコン」で、「Fluent UI System Icons のカタログ全体と、操作者が持ち込んだ安全な SVG のアイコンです。」の行と、件数のピルが付きます。読むには **Logic の表示**が、自分のアイコンの作成、編集、削除には **Logic の構成**が必要です。

## カタログ {#the-catalog}

カードの上には、**検索**（「名前またはタグ」）、**出どころ**、**1 ページの件数**が並びます。検索は、大文字と小文字を問わず、どのアイコンの名前とも、カタログのグリフの検索用のタグとも突き合わせます（グリフは、その名前に入っていないタグでも見つかります）。キーを押すたびに一覧は最初のページから作り直され、一覧にもう出ない選択は外れます。カードは、グリフ、名前、出どころ（カタログのグリフは**システム**、自分のものは**自分のもの**）を見せます。結果が空のときは「この絞り込みに合うアイコンはありません。」と**絞り込みを解除**が出ます。カタログは名前の順に並びます。自分のアイコンがカタログのグリフと区切りを共有しているときは、カードは両方とも並び、アドレスでは自分のものが勝ちます。

## 検査 {#the-inspector}

| 行 | 見せるもの |
| --- | --- |
| グリフ | 112 px で描きます |
| アドレス | `Assets.Icons.<segment>` |
| 出どころ | Fluent UI System Icons のカタログ、または自分のライブラリ |
| 形式 | 同梱のグリフ、または無害化した SVG |
| 検索用のタグ | カタログのグリフについて、名前のほかに検索が突き合わせる語 |

カタログのグリフは「システムのアイコンは読み取り専用です。」と出します。自分のアイコンは、構成できるロールに**編集**と**削除**を差し出します。

## 新しいユーザーアイコン {#new-user-icon}

Icons の行の上の動詞は、並びの代わりに「新しいユーザーアイコン」を開きます（「動きのない SVG のマークアップから、アドレスを持つアイコンを 1 つ作ります。」）。

| 項目 | 意味 | 受け付ける値と既定 | 効果 |
| --- | --- | --- | --- |
| 名前 | 表示の名前です。その区切りがアドレスになります。 | 必須。既定は空です。 | ダッシュボードと変数が持っているアドレスです。あとから編集で名前を変えられ、古いアドレスへの参照はすべて一緒に移ります。 |
| SVG のマークアップ | そのアイコンのマークアップを、文字列として貼り付けます。 | 必須。プレースホルダーには `<svg viewBox="0 0 24 24">…</svg>` と出ます。 | 入力しているそばから無害化されます。右のプレビューが、無害化した結果を 112 px で見せるか、「SVG が正しいと、安全なプレビューが出ます。」と述べます。 |

項目の下のエラーの行が、足りないもの（「名前と SVG のマークアップが必要です。」、「名前が必要です。」）や、無害化が拒否したものを述べます。**アイコンを作成**は、2 つの項目がどちらも正しくなるまで灰色のままです。**キャンセル**か**戻る**で、作らずに離れます。うまくいくと、そのカードが見えるようになり（検索と出どころの絞り込みがそれを隠してしまうときは、絞り込みが解除されます）、操作ログ帯が「アイコンを作成しました。」と伝えます。

### 無害化が残すものと拒否するもの {#what-the-sanitizer-keeps-and-refuses}

アイコンのマークアップは、検証されるデータの形式であって、実行される内容では決してありません。無害化は、動きのない SVG を残します。`svg`、`g`、`defs`、`symbol`、`use`、図形（`path`、`rect`、`circle`、`ellipse`、`line`、`polyline`、`polygon`）、`text` と `tspan`、`title` と `desc`、グラデーションと `stop`、`pattern`、`mask`、`clipPath`、`marker`、そしてその図形、塗り、文字の属性、それと同じプロパティだけに限った `style` の属性、そして内部の参照（`href="#id"`、`url(#id)`）です。それ以外はすべて取り除きます。`script` と `style` の要素、`foreignObject`、イベントの属性、外部と `data:` の URL、知らない属性、正しくない id、存在しない id への参照です。取り除いたことは伝えません。アイコンの編集で見えるのは無害化したプレビューだけで、修復を並べる行はなく、アイコンは無害化したマークアップとして保存されます。修復を数えて伝えるのは、[シンボルの取り込み](assets-symbols#import-symbol)だけです。空のマークアップ、整形式でない XML、`<svg>` の根がないもの、512 KB を超えるもの、4,096 要素を超えるもの、id が重なっているものは、そもそも拒否します。プレビューが無害化していないマークアップを見せることはありませんし、保存されたアイコンは、読むたびにもう一度無害化されます。

## 編集 {#edit}

**編集**は「`<name>` を編集」を開きます（「名前の変更は、Enter を押すか入力欄から離れたときに保存され、参照も一緒に移ります。正しい SVG の変更は自動で保存されます。」）。名前の変更の入力欄である**名前**の項目と、その下にマークアップが出ます。名前を入力している間、1 行が影響を予告します（「名前を変えると、このアドレスを読んでいる 2 か所が更新されます。」、「現在のアドレスを使っている参照はありません。」、あるいは新しい名前が同じ区切りに変換されるときは「実効アドレスは変わらないため、更新が必要な参照はありません。」）。Enter を押すか、入力欄から離れると確定します。アイコンはその id とそのマークアップを保ち、古いアドレスへの最上位を根とする参照はすべて書き換えられ、操作ログ帯が「アイコンの名前を変え、参照 N 件を更新しました。」と伝えます。すでに使われている名前は、その入力欄の下でその場で拒否されます。正しいマークアップの変更は、入力をやめてから 0.5 秒後に保存されます（「アイコンを保存しました。」）。正しくない下書きは保存されず、その理由を述べます。**戻る**でカタログに戻り、最後の正しいマークアップが保たれます。

## 削除 {#delete}

**削除**は「「X」を削除しますか？そのアドレスへの参照は、解決できなくなります。 この操作は元に戻せません。」と尋ねます。そのアドレスを返していた変数は、何にも解決しなくなり、それを[検証](validation)が並べます。操作ログ帯は「アイコンを削除しました。」と伝えます。

## アイコンの使われ先 {#where-an-icon-is-used}

出力がアイコンの[変数](logic-variables#output-types)が `Assets.Icons.<name>` を返し、結び付いたダッシュボードの[アイコン](component-icon)のコンポーネントがそれを描きます。カタログのグリフはフォントのグリフとして、自分のアイコンはそのマークアップとして描かれます。

## このライブラリがしないこと {#what-the-library-does-not-do}

SVG のファイルを取り込みません（マークアップを貼り付けてください）。自分のアイコンにタグを付けることもしません。色を付けることもしません（アイコンの色は、それを描くコンポーネントが決めます）。カタログのグリフを編集することも隠すこともしませんし、書き出しもしません。