구성 요소 아이콘을 사용하면 작성자가 아이콘이나 의미 있는 약자로 구성 요소를 빠르게 식별할 수 있습니다. 이제 작성자가 웹 경험을 보다 빠르게 작성하는 데 필요한 구성 요소를 찾을 수 있습니다.
이제 구성 요소 브라우저가 일관된 회색 테마에 표시되어 다음을 표시합니다.
기본적으로 구성 요소 제목([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"
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 이미지를 구성 요소 아이콘으로 구성하려면 원하는 SVG를 [cq:Component] 아래에 nt:file cq:icon.svg 로 추가합니다.
SVG 이미지에는 배경색이 #707070로 설정되고 크기가 20px x x x이어야 합니다.
/apps/.../components/content/my-component
- jcr:primaryType = "cq:Component"
+ cq:icon.svg
- jcr:primaryType = "nt:file"