Personalización de iconos de componente developing-component-icons-in-aem-sites

Los iconos de componente permiten a los autores identificar rápidamente un componente con iconos o abreviaturas significativas. Los autores ahora pueden encontrar los componentes necesarios para crear sus experiencias web más rápido que nunca.

El navegador de componentes ahora se muestra en un tema gris coherente, que muestra lo siguiente:

  • Grupo de componentes

  • Título del componente

  • Descripción del componente

  • Icono de componente

    • Las dos primeras letras del título de componente (predeterminado)
    • Imagen PNG personalizada (configurada por un desarrollador)
    • Imagen de SVG personalizada (configurada por un desarrollador)
    • Icono de CoralUI (configurado por un desarrollador)

Opciones de configuración del icono de componente component-icon-configuration-options

Abreviaciones abbreviations

De manera predeterminada, se utilizan como abreviatura los dos primeros caracteres del título del componente ([cq:Component]@jcr:title). Por ejemplo, si [cq:Component]@jcr:title=Article List, la abreviatura se mostraría como "Ar".

La abreviatura se puede personalizar mediante la propiedad [cq:Component]@abbreviation. Aunque este valor puede aceptar más de 2 caracteres, se recomienda limitar la abreviatura a 2 caracteres para evitar cualquier perturbación visual.

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

Iconos de CoralUI coralui-icons

AEM Los iconos de CoralUI, proporcionados por el usuario de la interfaz de usuario de, se pueden utilizar para iconos de componente. Para configurar un icono de CoralUI, establezca una propiedad [cq:Component]@cq:icon en el valor de atributo HTML icon del icono de CoralUI deseado (enumerado en la documentación de CoralUI).

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

Imágenes PNG png-images

Las imágenes PNG se pueden utilizar para los iconos de componente. Para configurar una imagen PNG como icono de componente, agregue la imagen deseada como nt:file con el nombre cq:icon.png en [cq:Component].

El PNG debe tener un fondo transparente o un color de fondo establecido en #707070.

Las imágenes PNG se han escalado a 20px por 20px. Sin embargo, es preferible que la retina se muestre 40px por 40px.

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

Imágenes de SVG svg-images

Las imágenes de SVG (basadas en vectores) se pueden utilizar para los iconos de componente. Para configurar una imagen de SVG como un ícono de componente, agregue el SVG deseado como un nt:file con el nombre cq:icon.svg en [cq:Component].

Las imágenes de SVG deben tener un color de fondo establecido en #707070 y un tamaño de 20 px por 20 px.

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

Recursos adicionales additional-resources

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