구성 요소 아이콘 사용자 정의 developing-component-icons-in-aem-sites

구성 요소 아이콘을 사용하면 작성자가 아이콘이나 의미 있는 약어로 구성 요소를 빠르게 식별할 수 있습니다. 이제 작성자가 웹 경험을 더 빠르게 빌드하는 데 필요한 구성 요소를 찾을 수 있습니다.

이제 구성 요소 브라우저가 일관된 회색 테마로 표시되어 다음을 표시합니다.

  • 구성 요소 그룹

  • 구성 요소 제목

  • 구성 요소 설명

  • 구성 요소 아이콘

    • 구성 요소 제목의 처음 두 글자 (기본값)
    • 사용자 정의 PNG 이미지 (개발자에 의해 구성됨)
    • 사용자 지정 SVG 이미지 (개발자에 의해 구성됨)
    • CoralUI 아이콘 (개발자에 의해 구성됨)

구성 요소 아이콘 구성 옵션 component-icon-configuration-options

약자 abbreviations

기본적으로 구성 요소 제목의 처음 2자([cq:Component]@jcr:title) 를 약어로 사용합니다. 예를 들어 다음과 같습니다. [cq:Component]@jcr:title=Article 목록 약어는 "로 표시됩니다​ 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 이미지를 구성 요소 아이콘으로 구성하려면 원하는 이미지를 (으)로 추가합니다 nt:file 명명된 cq:icon.png 다음 아래에 [cq:Component].

PNG에는 투명한 배경이 있거나 배경색이 로 설정되어야 합니다. #707070.

PNG 이미지의 크기는 다음과 같이 조정됩니다. 20px x 20px. 그러나 retina 디스플레이를 수용하려면 40픽셀 작성자: 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 및 크기 20px x 20px.

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

추가 리소스 additional-resources

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d