close

Filter

loading table of contents...

Studio Developer Manual / Version 2201

Table Of Contents

9.16.4 Icons / CoreMedia Icon Font

CoreMedia provides a complete set of Studio icons in the included Studio icon font. Since the Ext JS framework supports the use of icon fonts, it is the most commonly used mechanism. If the provided set of icons meets your requirements, you can make use of the icons by accessing them through the CoreIcons_properties.ts file, which is generated by the core-icons package. This file offers a mapping of keys to CSS classes.

You can add CSS classes to components by passing entries of the CoreIcons_properties.ts file to the iconCls of your component as shown below:

Config(IconDisplayField, {
  itemId: "helpIcon",
  iconCls: CoreIcons_properties.help,
})

Example 9.70. Usage of CoreIcons_properties.ts


CoreMedia recommends not using the generated CSS classes as a string in cls configurations, since the name of these classes can always change after upgrading to later versions of CoreMedia Studio. Use CoreIcons_properties.ts as a robust interface instead.

The core-icons package also defines SCSS variables that can be used to assign icons directly in your SCSS code. The following example sets the add icon for the StatusProxy:

$statusproxy-add-glyph: dynamic($cm-core-icons-100-var-plus 16px $cm-core-icons-100-font-name);

Example 9.71. Usage of CoreMedia Icons in SCSS


$statusproxy-add-glyph - like any other Ext JS glyph variable - requires you to pass the content, size and font-family as a list of values. The variable in the example above are generated by the core-icons package. You can access the content of an icon by using its SCSS variable: $cm-core-icons-[SCALE]-var-[ICON-NAME]

There are 3 different scales in the CoreMedia icon font. These scales differ in details, shown in the icon. An icon with small scale is usually displayed in a size of 16px. Therefore, a lot of details have to be cut out, due to the lack of space to display them. The icon would otherwise be displayed blurry. Of course, you can anyhow always determine the size of an icon for each usage. The following scales are available:

ScaleSizeIdentifierExample
Small16px100$cm-core-icons-100-var-help
Medium24px200$cm-core-icons-200-var-help
Large32px300$cm-core-icons-300-var-help

Table 9.4.  Different Icon Scales


Note

Note

You don't need to worry about scales if you pass an icon as iconCls to a Ext.button.Button. If you make proper use of the scale configuration, the component will automatically choose the right scale for the icon, based on it.

The CoreMedia Icons are an essential part of CoreMedia Studio and it is therefore not recommended removing the CoreMedia Icon Font from the workspace. Nevertheless, Sencha offers ways to include additional icon fonts as described in the Sencha Font Packages documentation. Available font packages are Ext JS, FontAwesome and Pictos.

While using icon fonts is the most commonly encountered way to display icons in CoreMedia Studio it is possible to display icons or images without using a particular font. Section 9.3, “Studio Plugins” describes how to load external resources. You can then address these resources in your SCSS code as follows:

.my-icon {
  background-image: url(get-resource-path("images/example.svg"));
}

Example 9.72. Get Resources in SCSS Code


Then pass the CSS class to the iconCls configuration of your component:

Config(Button, {
  iconCls: "my-icon",
})

Example 9.73. Use Image as IconClass


Whenever you feel to use an image as an icon, try to use SVG files. They have the same advantages as icon fonts:

  • The icon will always appear sharp, no matter in which size you display it

  • You can easily change the color of the icon

Since CoreMedia v11 it is also supported adding an SVG directly in TypeScript:

import myIcon from "./icons/my-icon.svg";

console.log(`SVG code:\n${typeArticle}`);

Example 9.74. Importing SVG in TypeScript


Importing directly from an *.svg file requires a type definition file in the src folder, for example src/custom.d.ts:

declare module "*.svg" {
  const content: string;
  export default content;
}

Example 9.75. SVG definition


As the definition file implies, importing an *.svg file yields a string result with the contents of the file. You can then pass the content to any JavaScript function or render it directly into the DOM. The package @coremedia/studio-client.base-models provides a utility class SvgIconUtil which offers a function that generates an icon class out of a given SVG code so that it can be used like an icon font (monochrome icon, color determined by text color):

Config(Button, {
  iconCls: SvgIconUtil.getIconStyleClassForSvgIcon(myIcon),
});

Example 9.76. Generating CSS class for SVG icon


Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.