自訂元件圖示

元件圖示可讓作者使用圖示或有意義的縮寫來快速識別元件。作者現在可以找到所需元件，以前所未有的速度建置其網頁體驗。

元件瀏覽器現在會以一致的灰色主題顯示，並顯示：

元件群組
元件標題
元件說明
元件圖示
- 元件標題的前兩個字母 （預設）
- 自訂PNG影像 （由開發人員設定）
- 自訂SVG影像 （由開發人員設定）
- CoralUI圖示 （由開發人員設定）

元件圖示組態選項

依預設，元件標題的前2個字元([cq：Component]@jcr：title)當作縮寫。例如，如果 [cq：Component]@jcr：title=文章清單 縮寫會顯示為「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影像設定為元件圖示，請將所需影像新增為 nt：file 已命名 cq：icon.png 在 [cq：Component].

PNG應具有透明背景，或將背景顏色設定為 #707070.

PNG影像會縮放至 20px x 20px. 但為了配合視網膜顯示 40px 作者： 40px 可能比較好。

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

SVG影像（向量型）可用於元件圖示。若要將SVG影像設定為元件圖示，請將所需SVG新增為 nt：file 已命名 cq：icon.svg 在 [cq：Component].

SVG影像的背景顏色應設為 #707070 並且大小為 20px x 20px。

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