Skip to content

Commit 38233b9

Browse files
hinzzxhinzzx
authored
feat: support SAPBusinessSuite icons v1 and v2 font ( Horizon ) (#6535)
* feat: support business icons v1 and v2 font ( Horizon )
1 parent 3f275b8 commit 38233b9

File tree

13 files changed

+1244
-56
lines changed

13 files changed

+1244
-56
lines changed

‎packages/base/src/config/Icons.ts

+12-5
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@ import { getIconCollectionByAlias } from "../assets-meta/IconCollectionsAlias.js
33

44
const IconCollectionConfiguration = new Map<string, string>();
55

6-
// All supported icon collections + uknown custom ones
7-
type IconCollection = "SAP-icons" | "SAP-icons-v4" | "SAP-icons-v5" | "horizon" | "tnt" | "tnt-v2" | "tnt-v3" | "business-suite" | string;
6+
// All supported icon collections + unknown custom ones
7+
type IconCollection = "SAP-icons" | "SAP-icons-v4" | "SAP-icons-v5" | "horizon" | "tnt" | "tnt-v2" | "tnt-v3" | "business-suite" | "business-suite-v1" | "business-suite-v2" | string;
88

99
// All registered icon collections - all icon collections resolves to these options at the end
1010
enum RegisteredIconCollection {
1111
SAPIconsV4 = "SAP-icons-v4",
1212
SAPIconsV5 = "SAP-icons-v5",
1313
SAPIconsTNTV2 = "tnt-v2",
1414
SAPIconsTNTV3 = "tnt-v3",
15-
SAPBSIcons = "business-suite",
15+
SAPBSIconsV1 = "business-suite-v1",
16+
SAPBSIconsV2 = "business-suite-v2",
1617
}
1718

1819
/**
@@ -87,9 +88,11 @@ const getEffectiveIconCollection = (collectionName?: IconCollection): IconCollec
8788
* - "tnt" (and its alias "SAP-icons-TNT") resolves to "tnt-v2" in "Quartz", "Belize", and resolves to "tnt-v3" in "Horizon"
8889
* - "tnt-v2" forces "TNT icons v2" in any theme and resolves to itself "tnt-v2"
8990
* - "tnt-v3" forces "TNT icons v3" in any theme and resolves to itself "tnt-v3"
90-
* - "business-suite" (and its alias "BusinessSuiteInAppSymbols") has no versioning and resolves to "business-suite"
91+
* - "business-suite" (and its alias "BusinessSuiteInAppSymbols") resolves to "business-suite-v1" in "Quartz", "Belize", and resolves to "business-suite-v2" in "Horizon"
92+
* - "business-suite-v1" forces "Business Suite icons v1" in any theme and resolves to itself "business-suite-v1"
93+
* - "business-suite-v2" forces "Business Suite icons v2" in any theme and resolves to itself "business-suite-v2"
9194
*
92-
* <b>Note:</b> "SAP-icons-v4", "SAP-icons-v5", "tnt-v2", "tnt-v3" and "business-suite" are just returned
95+
* <b>Note:</b> "SAP-icons-v4", "SAP-icons-v5", "tnt-v2", "tnt-v3", "business-suite-v1" and "business-suite-v2" are just returned
9396
* @param { IconCollection } collectionName
9497
* @returns { RegisteredIconCollection } the registered collection name
9598
*/
@@ -104,6 +107,10 @@ const getIconCollectionByTheme = (collectionName?: IconCollection): RegisteredIc
104107
return horizonThemeFamily ? RegisteredIconCollection.SAPIconsTNTV3 : RegisteredIconCollection.SAPIconsTNTV2;
105108
}
106109

110+
if (collectionName === "business-suite") {
111+
return horizonThemeFamily ? RegisteredIconCollection.SAPBSIconsV2 : RegisteredIconCollection.SAPBSIconsV1;
112+
}
113+
107114
return collectionName as RegisteredIconCollection;
108115
};
109116

‎packages/icons-business-suite/README.md

+22
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,28 @@ Example usage with `<ui5-icon>` web component:
2828
<ui5-icon name="business-suite/1x2-grid-layout"></ui5-icon>
2929
```
3030

31+
The package provides two versions of each icon (SAP Business Suite Icons v1 and SAP Business Suite Icons v2).
32+
If you don't specify the versioned collection name, like in the example above:
33+
34+
```html
35+
<ui5-icon name="business-suite/1x2-grid-layout"></ui5-icon>
36+
```
37+
38+
the framework will detect the current theme and render the corresponding icon - from `SAP Icons Business suite V2` (collection name `business-suite-v2`) for SAP Horizon theme family (sap_horizon, sap_horizon_dark, etc.), and from `SAP Icons Business suite V1` (collection name `business-suite-v1`) for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).
39+
40+
### Collections `business-suite-v1` and `business-suite-v2 `
41+
42+
In case you want to always display the `SAP Icons Business suite V1` icons in all themes, you can set it explicitly via the `business-suite-v1` collection name:
43+
44+
```html
45+
<ui5-icon name="business-suite-v1/answered"></ui5-icon>
46+
```
47+
48+
The same applies if you want to always display the `SAP Icons Business suite V2` icons. You can set it explicitly via the `business-suite-v2` collection name:
49+
```html
50+
<ui5-icon name="business-suite-v2/answered"></ui5-icon>
51+
```
52+
3153
For a full list of the icons in the `business-suite` collection, click [here](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).
3254

3355
## Resources

‎packages/icons-business-suite/global.d.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@ import { ColectionData } from "@ui5/webcomponents-base/dist/asset-registries/Ico
33
export {};
44

55
declare global {
6-
module "*/generated/assets/SAP-icons-business-suite.json" {
6+
module "*/generated/assets/v1/SAP-icons-business-suite.json" {
7+
const content: ColectionData;
8+
export default content;
9+
}
10+
11+
module "*/generated/assets/v2/SAP-icons-business-suite.json" {
712
const content: ColectionData;
813
export default content;
914
}

‎packages/icons-business-suite/package-scripts.js

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const getScripts = require("@ui5/webcomponents-tools/icons-collection/nps.js");
22

33
const options = {
44
collectionName: "SAP-icons-business-suite",
5+
versions: ["v1", "v2"],
56
typescript: true,
67
};
78

‎packages/icons-business-suite/src/json-imports/Icons-static.ts

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
import { registerIconLoader, CollectionData } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
22

3-
import SAPIconsBusinessSuiteUrl from "../generated/assets/SAP-icons-business-suite.json";
3+
import SAPIconsBusinessSuiteUrlV1 from "../generated/assets/v1/SAP-icons-business-suite.json";
4+
import SAPIconsBusinessSuiteUrlV2 from "../generated/assets/v2/SAP-icons-business-suite.json";
45

5-
const loadIconsBundle = async (): Promise<CollectionData> => {
6-
if (typeof SAPIconsBusinessSuiteUrl === "object") {
6+
const loadIconsBundle = async (collection: string): Promise<CollectionData> => {
7+
if (typeof SAPIconsBusinessSuiteUrlV1 === "object" || typeof SAPIconsBusinessSuiteUrlV2 === "object") {
78
// inlined from build
89
throw new Error("[icons-business-suite] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
910
}
10-
return (await fetch(SAPIconsBusinessSuiteUrl)).json();
11+
12+
const iconsUrl: string = collection === "business-suite-v1" ? SAPIconsBusinessSuiteUrlV1 : SAPIconsBusinessSuiteUrlV2;
13+
return (await fetch(iconsUrl)).json();
1114
}
1215

13-
registerIconLoader("business-suite", loadIconsBundle);
16+
const registerLoaders = () => {
17+
registerIconLoader("business-suite-v1", loadIconsBundle);
18+
registerIconLoader("business-suite-v2", loadIconsBundle);
19+
};
20+
21+
registerLoaders();

‎packages/icons-business-suite/src/json-imports/Icons.ts

+19-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
import { registerIconLoader, CollectionData } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
22

3-
const loadIconsBundle = async (): Promise<CollectionData> => {
4-
const iconData = (await import("../generated/assets/SAP-icons-business-suite.json")).default;
5-
if (typeof iconData === "string" && (iconData as string).endsWith(".json")) {
6-
throw new Error("[icons-business-suite] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use `import \"@ui5/webcomponents-icons-business-suite/dist/Assets-static.js\". Check the \"Assets\" documentation for more information.");
7-
}
8-
return iconData;
3+
const loadIconsBundle = async (collection: string): Promise<CollectionData> => {
4+
let iconData: CollectionData;
5+
6+
if (collection === "business-suite-v1") {
7+
iconData = (await import(`../generated/assets/v1/SAP-icons-business-suite.json`)).default;
8+
} else {
9+
iconData = (await import(`../generated/assets/v2/SAP-icons-business-suite.json`)).default;
10+
}
11+
12+
if (typeof iconData === "string" && (iconData as string).endsWith(".json")) {
13+
throw new Error("[icons-business-suite] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use `import \"@ui5/webcomponents-icons-business-suite/dist/Assets-static.js\". Check the \"Assets\" documentation for more information.");
14+
}
15+
return iconData;
916
}
1017

11-
registerIconLoader("business-suite", loadIconsBundle);
18+
const registerLoaders = () => {
19+
registerIconLoader("business-suite-v1", loadIconsBundle);
20+
registerIconLoader("business-suite-v2", loadIconsBundle);
21+
};
22+
23+
registerLoaders();

0 commit comments

Comments
 (0)