Theme-specific icons

For advanced branding, you can use theme-specific icons for theme-based blocks and components. This enhances visual organization and improves the user experience when working with different themes.

Theme-specific icon configuration relies on the following:

• Icon image availability under the required paths
• Icon naming convention with proper mapping between icons and themes
• Icon path definition for usage in blocks and/or components

Define theme-specific icons

To define theme-specific icons:

1. Add icon images to the appropriate locations for blocks and/or components.

2. Specify the icon paths for each dynamic theme as needed:

   • In ./common/components/components.json to add component icons
   • In ./common/blocks-library/blocks.json to add block icons

   // ./common/blocks-library/blocks.json
   {
   // Block ID and name
   "id": "header-capitalized",
   "name": "Header capitalized",
   // Path to the icon image
   "icon": "./common/blocks-library/header-capitalized/icon-aethercare-invitation-viseven-ukraine-ukr.png",
   // Path to the block
   "path": "./common/blocks-library/header-capitalized"
   }

3. Optional. For local development, set your desired theme as current in the project's settings.json file:

   {
     "theme": {
       "default": "mediplus",
       "current": "aethercare"
     }
   }

Once your dynamic template is ready, archive it with wiz archive and upload it to eWizard. When users select your template to create content items, they will see theme-specific icons for components and blocks, based on the selected theme and other metadata.

Icon naming convention

To ensure proper icon rendering, follow this naming convention:

1. The name must start with icon.
2. Next, specify a theme identifier.
3. Following the theme identifier, enter a purpose name.
4. Then, provide a target CLM code.
   Available for blocks only.
5. Finally, specify the target localization—country and language codes.

In summary, your icon name should follow this pattern:

icon-theme-purpose-clm-country-language.extension, for example:

icon-aethercare-invitation-viseven-ukraine-ukr.png

All selectors are included in settings.json. The following mapping applies:

• theme is the current theme name
• purpose as defined in ./common/metadata/purpose.json
• clm is the code value from targetCLM
• lang is the language code from langs
• country is the lowercase country name

You can omit any selectors except for icon. If a selector is omitted, the icon serves as the fallback for that category. Given this, icons with only icon in their names will be used as fallback for all other categories.

Icon path configuration options

You can also load icons for your block or component in bulk. The JSON field key determines the priority of how eWizard will load icons from the provided paths. The following priorities apply:

1st priority

iconsPath: A path to a location with multiple icons.

For example, "iconsPath": "./common/blocks-library/header-capitalized" loads all icons located in the /header-capitalized/ folder.

2nd priority

icon: A path to a single icon file.

For example, "icon": "./common/blocks-library/header-capitalized/icon-aethercare-invitation-viseven-ukraine-ukr.png".

3rd priority

path: A path to a block or component directory.

For example, "path": "./common/blocks-library/header-capitalized" loads all qualifying images from the specified path as the lowest priority.