コンポーネントアイコンのカスタマイズ developing-component-icons-in-aem-sites

コンポーネントアイコンを使用すると、オーサーはアイコンや意味のある略語でコンポーネントをすばやく識別できます。オーサーは、web エクスペリエンスを構築するのに必要なコンポーネントを、以前よりも迅速に見つけることができるようになりました。

コンポーネントブラウザーが一貫したグレーのテーマで表示され、次の項目が表示されるようになりました。

コンポーネントアイコンの設定オプション component-icon-configuration-options

略語 abbreviations

デフォルトでは、コンポーネントタイトルの最初の 2 文字（[cq:Component]@jcr:title）が略語として使用されます。例えば、[cq:Component]@jcr:title=Article List の場合、略語は「Ar」と表示されます。

略語は、[cq:Component]@abbreviation プロパティでカスタマイズできます。この値は 2 文字より長くすることもできますが、視覚的な障害を避けるために、略語は 2 文字に制限することをお勧めします。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - abbreviation = "AL"

CoralUI アイコン coralui-icons

AEM が提供する CoralUI アイコンは、コンポーネントアイコンに使用できます。CoralUI アイコンを設定するには、[cq:Component]@cq:icon プロパティを目的の CoralUI アイコンの HTML アイコン属性値に設定します（CoralUI ドキュメントに列挙されています）。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - cq:icon = "documentFragment"

PNG 画像 png-images

PNG 画像は、コンポーネントアイコンに使用できます。PNG 画像をコンポーネントアイコンとして設定するには、目的の画像を cq:icon.png という名前の nt:file として [cq:Component] に追加します。

PNG の背景は透明にするか、背景色を #707070 に設定する必要があります。

PNG 画像は、20ピクセル x 20ピクセル ​にサイズが調整されます。ただし、Retina ディスプレイに対応するには、40ピクセル x 40ピクセル ​が望ましい場合があります。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.png
     - jcr:primaryType = "nt:file"

SVG 画像 svg-images

SVG 画像（ベクトルベース）は、コンポーネントアイコンに使用できます。SVG 画像をコンポーネントアイコンとして設定するには、目的の SVG を nt:file という名前の cq:icon.svg として [cq:Component] に追加します。

SVG 画像の背景色は #707070 に設定し、サイズは 20ピクセル x 20ピクセル ​にする必要があります。

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  + cq:icon.svg
     - jcr:primaryType = "nt:file"

その他のリソース additional-resources