拡張機能アイコンの構成

SharePoint Framework (SPFx) でカスタム コマンドの目的を示すアイコンを選択すると、ユーザーはツール バーまたはコンテキスト メニューに表示されている他のオプションの中からコマンドを簡単に見つけることができます。 コマンドのアイコンの指定は任意です。 アイコンを指定しない場合、コマンドのタイトルのみがコマンド バーに表示されます。

SharePoint Framework では、次の種類の拡張機能の構築をサポートしています。

• アプリケーション カスタマイザー
• フィールド カスタマイザー
• コマンド セット

コマンド セットは、アイコンを構成できる唯一の SharePoint Framework 拡張機能の種類です。

コマンド セットを展開するときに、次のどの場所にコマンドを表示するかを選択できます。

• コマンド バー

  "location": "ClientSideExtension.ListViewCommandSet.CommandBar"
  

• コンテキスト メニュー

  "location": "ClientSideExtension.ListViewCommandSet.ContextMenu"
  

• 両方:

  "location": "ClientSideExtension.ListViewCommandSet"
  

異なるコマンドに対して定義されたアイコンは、コマンド バーに表示されるコマンドの場合にのみ表示されます。

SharePoint Framework には、拡張機能のアイコンを定義するための 2 つのオプションがあります。

• 外部のアイコン画像を使用する
• Base64 でエンコードされた画像を使用する

外部のアイコン画像を使用する

SharePoint Framework コマンド セットを構築するときは、拡張機能マニフェストのアイコン画像がある絶対 URL を特定することによって、各コマンドのアイコンを指定できます。 これは、iconImageUrl プロパティで行われます。

{
  "id": "6cdfbff6-714f-4c26-a60c-0b18afe60837",
  "alias": "WeatherCommandSet",
  "componentType": "Extension",
  "extensionType": "ListViewCommandSet",
  ...
  "items": {
    "WEATHER": {
      "title": { "default": "Weather" },
      "iconImageUrl": "https://localhost:4321/temp/sun.png",
      "type": "command"
    }
  }
}

コマンド バーに表示されるコマンド アイコンは、16 x 16 ピクセルです。 用意した画像がこれより大きい場合は、これらの寸法に比例したサイズに調整されます。

カスタム画像を使用すると、コマンドのアイコンを柔軟に選択できますが、他の拡張機能アセットと一緒にカスタム画像を展開する必要があります。

高い DPI や特定のアクセシビリティ設定で表示されると、画像の品質が低下する可能性があります。 品質の低下を回避するために、ベクター ベースの SVG 画像を使用できます。

Base64 でエンコードされた画像を使用する

カスタム画像を使用する場合、他の拡張機能アセットと一緒にホストされている画像ファイルの絶対 URL を指定するのではなく、画像を Base64 でエンコードして URL の代わりに Base64 文字列を使用できます。カスタム画像を使用する場合、他の拡張機能アセットと一緒にホストされている画像ファイルの絶対 URL を指定するのではなく、画像を Base64 でエンコードして URL の代わりに Base64 文字列を使用できます。

Base 64 エンコーディングで画像をエンコードするために、さまざまなサービスがオンラインで提供されています。例としては、「画像を Base 64 エンコーディングに変換する」があります。

画像をエンコードした後、Base64 文字列をコピーし、Web パーツ マニフェストの iconImageUrl プロパティの値として使用します。

{
  "id": "6cdfbff6-714f-4c26-a60c-0b18afe60837",
  "alias": "WeatherCommandSet",
  "componentType": "Extension",
  "extensionType": "ListViewCommandSet",
  ...
  "items": {
    "WEATHER": {
      "title": { "default": "Weather" },
      "iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAAAXNSR0IB2cksfwAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAB/hUlEQVR42u29ebwkWVUn/j03Ipe31PZqr+ruqu7q6pXuZlcRRgUVBRnUn0rpMAJuTDeLog4u48bMiDoMtCA0MjAwOqil4oI6qCO2oIiDTQ...",
      "type": "command"
    }
  }
}

Base 64 エンコーディング エンコードは、PNG のようなビットマップ画像とベクトル SVG 画像の両方で動作します。 Base 64 エンコーディングでエンコードされたイメージを使用する利点は、SPFx 拡張機能に加えて Web パーツ アイコン イメージを展開する必要がないことです。

関連項目

• SharePoint Framework 拡張機能の概要