プロダクトアイコンテーマ
Visual Studio Code には、ビューやエディターで使用される組み込みアイコンのセットが含まれていますが、ホバー、ステータスバー、さらには拡張機能からも参照できます。例としては、フィルターアクションボタンやビューアイコン、ステータスバー、ブレークポイント、ツリーやエディターの折りたたみアイコンなどがあります。
プロダクトアイコンテーマを使用すると、拡張機能はこれらのアイコンを再定義して、VS Code の外観をカスタマイズできます。プロダクトアイコンテーマの対象外となるのは、ファイルアイコン (ファイルアイコンテーマの対象) と拡張機能によって提供されるアイコンです。
VS Code では、アイコンはアイコンフォントのグリフとして定義する必要があり、(現在) プロダクトアイコンは単色で構成されるように制限されています。アイコンに使用される色は、表示される場所によって異なり、アクティブなカラーテーマによって定義されます。
新しいプロダクトアイコンテーマの追加
独自のプロダクトアイコンテーマを定義するには、まず VS Code 拡張機能を作成し、拡張機能の package.json に productIconThemes contribution point を追加します。
{
"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 キーを押します。これにより、拡張機能開発ホストウィンドウで拡張機能が実行されます。ウィンドウには拡張機能が有効になっており、拡張機能は自動的に最初のプロダクトアイコンテーマに切り替わります。
また、テーマファイルは変更が監視され、テーマファイルが変更されるたびにアイコンの更新が自動的に適用されます。プロダクトアイコン定義ファイルを操作すると、保存時に変更がライブで表示されます。
プロダクトアイコンテーマを切り替えるには、設定: Product Icon Theme コマンドを使用します。
VS Code UI の特定の場所で使用されているアイコンを確認するには、Help > Toggle Developer Tools を実行してデベロッパーツールを開き、次に
- 左上にあるデベロッパーツールの Inspect ツールをクリックします。
- アイコンの上にマウスを移動して検査します。
- アイコンのクラス名が
codicon.codicon-remoteの場合、アイコン ID はremoteです。
サンプル
Product Color Theme sample はプレイグラウンドとして使用できます。