自訂元件圖示 developing-component-icons-in-aem-sites

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

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

元件圖示組態選項 component-icon-configuration-options

縮寫 abbreviations

依預設，元件標題([cq：Component]@jcr：title)的前2個字元會作為縮寫。 例如，如果​ [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：Component] ​下將所需的影像新增為名為​ cq：icon.png ​的​ nt：file。

PNG應該要有透明背景，或是背景顏色設定為​ #707070。

PNG影像已縮放為​ 20px x x 20px。 不過，如果要讓​ 40px ​與​ 40px ​搭配使用，可能比較合適。

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

SVG影像 svg-images

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

SVG影像的背景顏色應設為​ #707070，大小為​ 20px x 20px.

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

其他資源 additional-resources