Defining Custom Icons

Icons are widely used to represent different types of objects in CUE:

  • Content items

  • Publications

  • Story elements in storylines

  • Workflow states

  • Dashboards

  • Macros

The icon used to represent a content item varies according to its type: stories are represented by document icons, pictures by image icons, and so on. Similarly, paragraph, image and table story elements are all represented by different icons, as are different publications, workflow states, dashboards and macros. A number of standard icons are supplied with CUE for use with default publications, content types, story element types, states and so on. It is of course possible to re-use some of these icons for your own content types, story element types and so on, but it is not recommended – you should define your own custom icons.

All of the above object types are defined in Content Store resource files of one kind or another as part of the publication definition process described in the Content Store Publication Design Guide.

In general, defining an icon for one of the above object types involves creating the icon itself (an image file, for example) and then adding a ui:icon element that references the image to the object type's definition in the appropriate Content Store resource file. Suppose, for example, that you want to add an icon to your "Long Story" content type. In this case you would need to insert a ui:icon element as a child of the <content-type name="longstory"> element in your publication's content-type resource. Similarly, for a "Special Para" story element type, you would need to insert a ui:icon element as a child of the <story-element-type name="specialpara"> element in your specialpara.xml story element type resource.

The details of what kind of image you should create and how you should use the ui:icon element vary between the above object types. In some cases only .PNG images may be used as icons, whereas in other cases more freedom is allowed (.SVG files, inline SVG code, Unicode characters and so on). For detailed instructions, see the Content Store Publication Design Guide and the reference description of the ui:icon element.