自定义组件图标 developing-component-icons-in-aem-sites

组件图标允许作者使用图标或有意义的缩写快速识别组件。 作者现在可以找到比以往更快地构建其Web体验所需的组件。

组件浏览器现在以一致的灰色主题显示，其中显示：

组件图标配置选项 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 x 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