コンポーネントアイコンを使用すると、作成者は、アイコンや意味のある省略形でコンポーネントをすばやく識別できます。 作成者は、Webエクスペリエンスを構築するのに必要なコンポーネントを、以前よりも迅速に見つけることができるようになりました。
コンポーネントブラウザーが一貫したグレーのテーマで表示され、次の項目が表示されます。
デフォルトでは、コンポーネントタイトルの最初の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"
AEMが提供するCoralUIアイコンは、コンポーネントアイコンに使用できます。 CoralUIアイコンを設定するには、[cq:Component]@cq:iconプロパティを目的のCoralUIアイコンのHTMLアイコン属性値に設定します(CoralUIのドキュメントに列挙されています)。
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
- cq:icon = "documentFragment"
コンポーネントアイコンにはPNG画像を使用できます。 PNG画像をコンポーネントアイコンとして設定するには、[cq:Component]の下にnt:fileという名前のcq:icon.pngを付けて、目的の画像を追加します。
PNGは、透明な背景にするか、背景色を#707070に設定する必要があります。
PNG画像は、20pxに合わせて20px拡大/縮小されます。 ただし、Retinaディスプレイ40pxを40pxに収めるのが望ましい場合があります。
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.png
- jcr:primaryType = "nt:file"
SVG画像(ベクトルベース)はコンポーネントアイコンに使用できます。 SVG画像をコンポーネントアイコンとして設定するには、[cq:Component]の下にnt:fileとしてcq:icon.svgを追加します。
SVG画像の背景色は#707070に、サイズは20px x 20pxに設定する必要があります。
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.svg
- jcr:primaryType = "nt:file"