製品アイコンテーマ
Visual Studio Code には、ビューやエディターで使用される一連の組み込みアイコンがありますが、ホバー、ステータスバー、さらには拡張機能からも参照できます。例としては、フィルターアクションボタンやビューアイコン、ステータスバー、ブレークポイント、ツリーやエディターの折りたたみアイコンなどがあります。
製品アイコンテーマを使用すると、拡張機能がこれらのアイコンを再定義して、VS Code にカスタムの外観を与えることができます。製品アイコンテーマの対象外となるのは、ファイルアイコン（ファイルアイコンテーマの対象）と拡張機能によって提供されるアイコンです。
VS Code では、アイコンがアイコンフォント内のグリフとして定義されている必要があり、(現在) 製品アイコンは単色で構成されるように制限されています。アイコンに使用される色は、表示される場所によって異なり、アクティブなカラーテーマによって定義されます。
新しい製品アイコンテーマを追加する
独自の製品アイコンテーマを定義するには、まず VS Code 拡張機能を作成し、拡張機能の package.json に productIconThemes 貢献ポイントを追加します。
{
"contributes": {
"productIconThemes": [
{
"id": "aliensAreBack",
"label": "Aliens Are Back",
"path": "./producticons/aliens-product-icon-theme.json"
}
]
}
}
id は製品アイコンテーマの識別子です。設定で使用されるため、一意で読みやすいものにしてください。label は製品アイコンテーマピッカーのドロップダウンに表示されます。path は、アイコンセットを定義する拡張機能内のファイルを指します。ファイル名が *product-icon-theme.json という名前スキームに従っている場合、VS Code で製品アイコンテーマファイルを編集する際に、補完サポートとホバーが得られます。
製品アイコン定義ファイル
製品アイコン定義ファイルは、1 つ以上のアイコンフォントと一連のアイコン定義を定義する JSON ファイルです。
フォント定義
fonts セクションでは、使用したいグリフフォントをいくつでも宣言できますが、少なくとも 1 つのフォント定義を定義する必要があります。
これらのフォントは、後でアイコン定義で参照できます。アイコン定義でフォント ID が指定されていない場合、最初に宣言されたフォントがデフォルトとして使用されます。
フォントファイルを拡張機能にコピーし、それに応じてパスを設定します。
WOFF フォントを使用することをお勧めします。
{
"fonts": [
{
"id": "alien-font",
"src": [
{
"path": "./alien.woff",
"format": "woff"
}
],
"weight": "normal",
"style": "normal"
}
]
}
アイコン定義
VS Code は、ビューがアイコンを参照するために使用するアイコン ID のリストを定義します。製品アイコンの iconDefinitions セクションは、これらの ID に新しいアイコンを割り当てます。
各定義は fontId を使用して、fonts セクションで定義されたフォントの 1 つを参照します。fontId が省略された場合、フォント定義にリストされている最初のフォントが使用されます。
{
"iconDefinitions": {
"dialog-close": {
"fontCharacter": "\\43",
"fontId": "alien-font"
}
}
}
すべてのアイコン識別子のリストは、アイコンリファレンスにあります。
開発とテスト
VS Code には、package.json ファイルと製品アイコンテーマファイルの両方に対する組み込みの編集サポートがあります。これを取得するには、テーマファイル名が product-icon-theme.json で終わる必要があります。これにより、既知のアイコン ID を含むすべてのプロパティのコード補完、ホバー、検証が可能になります。
製品アイコンテーマを試すには、VS Code で拡張機能フォルダーを開き、F5 を押します。これにより、拡張機能開発ホストウィンドウで拡張機能が実行されます。このウィンドウでは拡張機能が有効になり、拡張機能は最初の製品アイコンテーマに自動的に切り替わります。
また、テーマファイルは変更が監視されており、テーマファイルが変更されるたびにアイコンの更新が自動的に適用されます。製品アイコン定義ファイルの作業を行うと、保存時に変更がライブで表示されます。
製品アイコンテーマを切り替えるには、コマンドPreferences: Product Icon Themeを使用します。
VS Code UI の特定の場所で使用されているアイコンを調べるには、ヘルプ > 開発者ツールの切り替えを実行して開発者ツールを開き、
- 開発者ツールの左上にある検査ツールをクリックします。
- 検査するアイコンの上にマウスを移動します。
- アイコンのクラス名が
codicon.codicon-remoteの場合、アイコン ID はremoteです。
サンプル
製品カラーテーマのサンプルをプレイグラウンドとして使用できます。