製品アイコンテーマ
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 セクションで定義されたフォントのいずれかを参照します。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 の特定の場所でどのアイコンが使用されているかを確認するには、Help > Toggle Developer Tools を実行して開発者ツールを開き、次の手順を実行します。
- 左上にある開発者ツールの検査ツールをクリックします。
- 検査するアイコンの上にマウスを移動します。
- アイコンのクラス名が
codicon.codicon-remoteの場合、アイコンIDはremoteです。
サンプル
Product Color Theme サンプルは、遊び場として使用できます。