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.