AEM 6.3 Sites has enhanced the page editor's Component Icons to support quickly identifiable icons or meaningful abbreviations. Authors can now find locate the Components required to build out their Web experiences faster than ever.

The Component browser now displays in a consistent grey theme, displaying the:

  • Component Group
  • Component Title
  • Component Description
  • Component Icon
    • The first two letters of the Component Title (default)
    • Custom PNG image (configured by a developer)
    • Custom SVG image (configured by a developer)
    • CoralUI icon (configured by a developer)

Component icon configuration options

Abbreviations

By default, the first 2 characters of component title ([cq:Component]@jcr:title) are used as the abbreviation. For example, if [cq:Component]@jcr:title=Article List the abbrevation would display as "Ar".

The abbreviation can be customied via the [cq:Component]@abbreviation property. While this value can accept more than 2 characters, it is recommended to limit the abbreviation to 2 characters to avoid any visual disturbance.

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - abbreviation = "AL"

CoralUI Icons

CoralUI icons, provided by AEM, can be used for component icons. To configure a CoralUI icon, set a [cq:Component]@cq:icon property to the desired CoralUI icon's HTML icon attribute value (enumerated in the CoralUI documenation).

/apps/.../components/content/my-component
  - jcr:primaryType = "cq:Component"
  - cq:icon = "documentFragment"

PNG Images

PNG images can be used for component icons. To configure a PNG image as a component icon, add the desired image as a nt:file named cq:icon.png under the [cq:Component].

The PNG should have a transparent background, or a background color set to #707070.

The PNG images will be scaled to 20px by 20px. However to accomidate retina displays 40px by 40px might be preferrable. 

 

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

SVG Images

SVG images (vector-based) can be used for component icons. To configure a SVG image as a component icon, add the desired SVG as a nt:file named cq:icon.svg under the [cq:Component].

SVG images should have a background color set to #707070 and a size of 20px by 20px.

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

Supporting materials

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy