feat(framework): configure default icon collection per theme (#5031)

Author: ilhan007

packages/base/hash.txt

@@ -1 +1 @@
-1xd6xbRotmYM0O01qxhGL8Fk17E=
+DkQ0iqK3nl9zgm3odHFLssq0yeA=

packages/base/src/asset-registries/Icons.js

@@ -1,6 +1,6 @@
 import getSharedResource from "../getSharedResource.js";
 import IconCollectionsAlias from "../assets-meta/IconCollectionsAlias.js";
-import { isThemeFamily } from "../config/Theme.js";
+import { getEffectiveDefaultIconCollection } from "../config/Icons.js";
 
 const loaders = new Map();
 const registry = getSharedResource("SVGIcons.registry", new Map());
@@ -48,7 +48,7 @@ const _fillRegistry = bundleData => {
 // set
 const registerIcon = (name, { pathData, ltr, accData, collection, packageName } = {}) => { // eslint-disable-line
 	if (!collection) {
-		collection = _getDefaultCollection();
+		collection = getEffectiveDefaultIconCollection();
 	}
 
 	const key = `${collection}/${name}`;
@@ -68,7 +68,7 @@ const _parseName = name => {
 
 	let collection;
 	[name, collection] = name.split("/").reverse();
-	collection = collection || _getDefaultCollection();
+	collection = collection || getEffectiveDefaultIconCollection();
 
 	// Normalize collection name.
 	// - resolve `SAP-icons-TNT` to `tnt`.
@@ -117,10 +117,6 @@ const _getRegisteredNames = async () => {
 	return Array.from(registry.keys());
 };
 
-const _getDefaultCollection = () => {
-	return isThemeFamily("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
-};
-
 const _normalizeCollection = collectionName => {
 	if (IconCollectionsAlias[collectionName]) {
 		return IconCollectionsAlias[collectionName];

packages/base/src/config/Icons.js

@@ -0,0 +1,52 @@
+import { getTheme, isThemeFamily } from "./Theme.js";
+
+const IconCollectionConfiguration = new Map();
+
+/**
+ * Sets the default icon collection (v4 or v5) per theme,
+ * which will be applied in case icon collection is not specified.
+ *
+ * Note: by default SAP-icons-v5 is used in SAP Horizon and  SAP-icons-v4 for all the rest.
+ * @param {String} theme
+ * @param {String} collectionName
+ */
+const setDefaultIconCollection = (theme, collectionName) => {
+	if (collectionName === "horizon") {
+		collectionName = "SAP-icons-v5";
+	}
+
+	IconCollectionConfiguration.set(theme, collectionName);
+};
+
+/**
+ * Returns the default icon collection (v4 or v5) for given theme,
+ * that is configured.
+ *
+ * @param {String} theme
+ * @returns {String}
+ */
+const getDefaultIconCollection = theme => {
+	return IconCollectionConfiguration.get(theme);
+};
+
+/**
+ * Returns the effective icon collection that will be applied for icon web components
+ * whenever namespace is not specified.
+ * @returns {String}
+ */
+const getEffectiveDefaultIconCollection = () => {
+	const currentTheme = getTheme();
+	const currentThemeConfiguration = IconCollectionConfiguration.get(currentTheme);
+
+	if (currentThemeConfiguration) {
+		return currentThemeConfiguration;
+	}
+
+	return isThemeFamily("sap_horizon") ? "SAP-icons-v5" : "SAP-icons";
+};
+
+export {
+	setDefaultIconCollection,
+	getDefaultIconCollection,
+	getEffectiveDefaultIconCollection,
+};

packages/main/bundle.common.js

@@ -141,6 +141,15 @@ const testAssets = {
 	defaultTexts,
 };
 
+// The SAP Icons V4 icon collection is set by default in sap_fiori_3,
+// but it's configurable:
+// import { setDefaultIconCollection } from  "@ui5/webcomponents-base/dist/config/Icons.js";
+// setDefaultIconCollection("sap_fiori_3", "SAP-icons-v5");
+// or 
+// setDefaultIconCollection("sap_fiori_3", "horizon");
+// or for custom theme
+// setDefaultIconCollection("my_custom_theme", "SAP-icons-v5");
+
 window["sap-ui-webcomponents-bundle"] = testAssets;
 
 export default testAssets;