プロダクトアイコンテーマ
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の特定の場所でどのアイコンが使用されているかを確認するには、ヘルプ > 開発者ツールを切り替える を実行して開発者ツールを開き、以下を行います。
- 左上の開発者ツールインスペクターをクリックします。
- インスペクトしたいアイコンの上にマウスを移動します。
- アイコンのクラス名が
codicon.codicon-remoteの場合、アイコンIDはremoteです。
サンプル
Product Color Themeサンプルを遊び場（プレイグラウンド）として利用できます。