Skip to content

Commit 0b16434

Browse files
nnaydenownnaydenow
authored
feat: update sap/icons to v5.12 & 4.24 (#13319)
Update `sap/icons` based on the latest `v4` and `v5` fonts available + add the following `new sap icons`: ```html <ui5-icon name="smart-watch"></ui5-icon> <ui5-icon name="vr-glasses"></ui5-icon> ``` <img width="456" height="61" alt="image" src="https://github.com/user-attachments/assets/cc87cf5d-0fa1-4902-beaa-f7cb0d421ec0" /> <img width="446" height="61" alt="image" src="https://github.com/user-attachments/assets/b4741357-ecdf-47e6-bfa6-4cf110ed07cf" /> Additionally to that icon SVGs are now directly consumed instead of extracting them from the icon font.
1 parent a309700 commit 0b16434

6 files changed

Lines changed: 3374 additions & 1833 deletions

File tree

‎packages/base/src/asset-registries/Icons.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ type CollectionData = {
1919
path?: string,
2020
paths?: Array<string>,
2121
ltr?: boolean,
22+
viewBox?: string,
2223
acc?: I18nText,
2324
}>,
2425
};
@@ -70,6 +71,7 @@ const _fillRegistry = (bundleData: CollectionData) => {
7071
registerIcon(iconName, {
7172
pathData: (iconData.path || iconData.paths)!,
7273
ltr: iconData.ltr,
74+
viewBox: iconData.viewBox,
7375
accData: iconData.acc,
7476
collection: bundleData.collection,
7577
packageName: bundleData.packageName,

‎packages/icons/src/v4/SAP-icons.json‎

Lines changed: 1605 additions & 889 deletions
Large diffs are not rendered by default.

‎packages/icons/src/v5/SAP-icons.json‎

Lines changed: 1605 additions & 889 deletions
Large diffs are not rendered by default.

‎packages/main/test/pages/Icon.html‎

Lines changed: 139 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
56
<meta charset="utf-8">
@@ -25,7 +26,8 @@
2526
<body class="icon1auto">
2627
<ui5-toggle-button id="myBtn">Fiori 3/Next</ui5-toggle-button>
2728
<br>
28-
<ui5-icon title="add equipment" class="icon2auto" id="myIcon" show-tooltip accessible-name="Hello SVG Icon" name="add-equipment"></ui5-icon>
29+
<ui5-icon title="add equipment" class="icon2auto" id="myIcon" show-tooltip accessible-name="Hello SVG Icon"
30+
name="add-equipment"></ui5-icon>
2931
<ui5-icon name="direction-arrows" class="icon-blue icon-medium"></ui5-icon>
3032
<ui5-icon name="male" class="icon-blue icon-small"></ui5-icon>
3133
<ui5-icon name="female" class="icon-red"></ui5-icon>
@@ -43,36 +45,26 @@ <h3>Icon semantic 'design' variants</h3>
4345
<ui5-icon name="female" class="icon3auto" design="Positive"></ui5-icon>
4446

4547
<h3>Icon with tooltip</h3>
46-
<ui5-icon title="company view" class="icon3auto" show-tooltip accessible-name="This is the tooltip`s text" name="company-view"></ui5-icon>
48+
<ui5-icon title="company view" class="icon3auto" show-tooltip accessible-name="This is the tooltip`s text"
49+
name="company-view"></ui5-icon>
4750

4851
<h3>API: mode="Interactive"</h3>
4952
<ui5-icon mode="Interactive" class="samples-margin" accessible-name="Hello World" name="horizon/accept"></ui5-icon>
50-
<ui5-icon
51-
id="myInteractiveIcon"
52-
mode="Interactive"
53-
name="add-equipment"
54-
class="icon3auto">
53+
<ui5-icon id="myInteractiveIcon" mode="Interactive" name="add-equipment" class="icon3auto">
5554
</ui5-icon>
5655

5756
<br>
5857

5958
<h3>API: mode="Image" (by default)</h3>
6059
<ui5-icon class="samples-margin" accessible-name="Hello World" name="horizon/accept"></ui5-icon>
61-
<ui5-icon
62-
id="imageIcon"
63-
name="add-equipment"
64-
class="icon3auto">
60+
<ui5-icon id="imageIcon" name="add-equipment" class="icon3auto">
6561
</ui5-icon>
6662

6763
<br>
6864

6965
<h3>API: mode="Decorative"</h3>
70-
<ui5-icon mode="Decorative" class="samples-margin" accessible-name="Hello World" name="horizon/accept"></ui5-icon>
71-
<ui5-icon
72-
id="decorativeIcon"
73-
mode="Decorative"
74-
name="add-equipment"
75-
class="icon3auto">
66+
<ui5-icon mode="Decorative" class="samples-margin" accessible-name="Hello World" name="horizon/accept"></ui5-icon>
67+
<ui5-icon id="decorativeIcon" mode="Decorative" name="add-equipment" class="icon3auto">
7668
</ui5-icon>
7769

7870
<br>
@@ -103,18 +95,18 @@ <h3>API: mode="Decorative"</h3>
10395
<ui5-date-picker class="icon6auto" value-state="Negative" value="Value State Error">
10496
</ui5-date-picker>
10597

106-
<br/><br/>
98+
<br /><br />
10799

108100
<ui5-title>Tests "click" and "ui5-click" events</ui5-title>
109-
<br/>
101+
<br />
110102
<ui5-icon id="interactive-icon" name="add-equipment" class="icon-blue icon-medium" mode="Interactive"></ui5-icon>
111103
<ui5-label>"click"</ui5-label><ui5-input id="click-event" value="0"></ui5-input>
112104
<ui5-label>"ui5-click"</ui5-label><ui5-input id="ui5-click-event" value="0"></ui5-input>
113-
<br/>
105+
<br />
114106
<ui5-icon id="non-interactive-icon" name="add-equipment" class="icon-blue icon-medium"></ui5-icon>
115107
<ui5-label>"click"</ui5-label><ui5-input id="click-event-2" value="0"></ui5-input>
116108
<ui5-label>"ui5-click"</ui5-label><ui5-input id="ui5-click-event-2" value="0"></ui5-input>
117-
<br/>
109+
<br />
118110

119111
<ui5-button icon="overflow"></ui5-button>
120112
<ui5-icon name="overflow" class="icon7auto"></ui5-icon>
@@ -181,46 +173,151 @@ <h3>SAP business-suite Icons</h3>
181173
nonInteractiveIconClickCounter = 0,
182174
nonInteractiveIconUI5ClickCounter = 0;
183175

184-
interactiveIcon.addEventListener("click", function() {
176+
interactiveIcon.addEventListener("click", function () {
185177
inpClickEventIteractive.value = `${++interactiveIconClickCounter}`;
186178
});
187-
interactiveIcon.addEventListener("ui5-click", function() {
179+
interactiveIcon.addEventListener("ui5-click", function () {
188180
inpUI5ClickEventIteractive.value = `${++interactiveIconUI5ClickCounter}`;
189181
});
190182

191183

192-
nonInteractiveIcon.addEventListener("click", function() {
184+
nonInteractiveIcon.addEventListener("click", function () {
193185
inpClickEventNonIteractive.value = `${++nonInteractiveIconClickCounter}`;
194186
});
195-
nonInteractiveIcon.addEventListener("ui5-click", function() {
187+
nonInteractiveIcon.addEventListener("ui5-click", function () {
196188
inpUI5ClickEventNonIteractive.value = `${++nonInteractiveIconUI5ClickCounter}`;
197189
});
198190
</script>
199191

200192
<script type="module">
201193
(async () => {
202-
var iconNames = await window["sap-ui-webcomponents-bundle"].getIconNames();
203-
iconNames.forEach(iconName => {
204-
var icon = document.createElement("ui5-icon");
205-
icon.name = iconName;
206-
allIcons.appendChild(icon);
207-
});
194+
// Add delay to ensure icons are registered
195+
setTimeout(async () => {
196+
var iconNames = await window["sap-ui-webcomponents-bundle"].getIconNames();
197+
console.log(iconNames);
198+
199+
// Group icons by collection
200+
const collections = {
201+
'SAP-icons-v4': [],
202+
'SAP-icons-v5': [],
203+
'tnt-v2': [],
204+
'tnt-v3': [],
205+
'business-suite-v1': [],
206+
'business-suite-v2': []
207+
};
208+
209+
// Sort icons into collections
210+
iconNames.forEach(iconName => {
211+
if (iconName.startsWith('SAP-icons-v4/')) {
212+
collections['SAP-icons-v4'].push(iconName);
213+
} else if (iconName.startsWith('SAP-icons-v5/')) {
214+
collections['SAP-icons-v5'].push(iconName);
215+
} else if (iconName.startsWith('tnt-v2/')) {
216+
collections['tnt-v2'].push(iconName);
217+
} else if (iconName.startsWith('tnt-v3/')) {
218+
collections['tnt-v3'].push(iconName);
219+
} else if (iconName.startsWith('business-suite-v1/')) {
220+
collections['business-suite-v1'].push(iconName);
221+
} else if (iconName.startsWith('business-suite-v2/')) {
222+
collections['business-suite-v2'].push(iconName);
223+
}
224+
});
225+
226+
// Render icons for each collection
227+
Object.keys(collections).forEach(collectionName => {
228+
const section = document.getElementById(collectionName);
229+
if (section && collections[collectionName].length > 0) {
230+
const countSpan = section.querySelector('.count');
231+
if (countSpan) {
232+
countSpan.textContent = collections[collectionName].length;
233+
}
234+
collections[collectionName].forEach(iconName => {
235+
var icon = document.createElement("ui5-icon");
236+
icon.name = iconName;
237+
icon.className = "samples-margin";
238+
section.appendChild(icon);
239+
});
240+
}
241+
});
242+
}, 2000);
208243
})();
209244
</script>
210245

211246
<script nomodule>
212-
window["sap-ui-webcomponents-bundle"].getIconNames().then(function(iconNames) {
213-
iconNames.forEach(function(iconName) {
214-
var icon = document.createElement("ui5-icon");
215-
icon.name = iconName;
216-
allIcons.appendChild(icon);
217-
});
247+
248+
// Add delay to ensure icons are registered
249+
setTimeout(function () {
250+
window["sap-ui-webcomponents-bundle"].getIconNames().then(function (iconNames) {
251+
// Group icons by collection
252+
var collections = {
253+
'SAP-icons-v4': [],
254+
'SAP-icons-v5': [],
255+
'tnt-v2': [],
256+
'tnt-v3': [],
257+
'business-suite-v1': [],
258+
'business-suite-v2': []
259+
};
260+
261+
// Sort icons into collections
262+
iconNames.forEach(function (iconName) {
263+
if (iconName.startsWith('SAP-icons-v4/')) {
264+
collections['SAP-icons-v4'].push(iconName);
265+
} else if (iconName.startsWith('SAP-icons-v5/')) {
266+
collections['SAP-icons-v5'].push(iconName);
267+
} else if (iconName.startsWith('tnt-v2/')) {
268+
collections['tnt-v2'].push(iconName);
269+
} else if (iconName.startsWith('tnt-v3/')) {
270+
collections['tnt-v3'].push(iconName);
271+
} else if (iconName.startsWith('business-suite-v1/')) {
272+
collections['business-suite-v1'].push(iconName);
273+
} else if (iconName.startsWith('business-suite-v2/')) {
274+
collections['business-suite-v2'].push(iconName);
275+
}
276+
});
277+
278+
// Render icons for each collection
279+
Object.keys(collections).forEach(function (collectionName) {
280+
var section = document.getElementById(collectionName);
281+
if (section && collections[collectionName].length > 0) {
282+
var countSpan = section.querySelector('.count');
283+
if (countSpan) {
284+
countSpan.textContent = collections[collectionName].length;
285+
}
286+
collections[collectionName].forEach(function (iconName) {
287+
var icon = document.createElement("ui5-icon");
288+
icon.name = iconName;
289+
icon.className = "samples-margin";
290+
section.appendChild(icon);
291+
});
292+
}
293+
});
294+
}, 2000);
218295
});
219296
</script>
220297

221298

222-
<section id="allIcons">
223-
<h3>All icons</h3>
299+
<section id="SAP-icons-v4">
300+
<h3>SAP-icons-v4 (<span class="count">0</span>)</h3>
301+
</section>
302+
303+
<section id="SAP-icons-v5">
304+
<h3>SAP-icons-v5 (<span class="count">0</span>)</h3>
305+
</section>
306+
307+
<section id="tnt-v2">
308+
<h3>tnt-v2 (<span class="count">0</span>)</h3>
309+
</section>
310+
311+
<section id="tnt-v3">
312+
<h3>tnt-v3 (<span class="count">0</span>)</h3>
313+
</section>
314+
315+
<section id="business-suite-v1">
316+
<h3>business-suite-v1 (<span class="count">0</span>)</h3>
317+
</section>
318+
319+
<section id="business-suite-v2">
320+
<h3>business-suite-v2 (<span class="count">0</span>)</h3>
224321
</section>
225322

226323
<section class="sectionLTR1" dir="ltr">
@@ -292,11 +389,12 @@ <h3>Icons in RTL and mirrored</h3>
292389
</section>
293390

294391
<script>
295-
myBtn.addEventListener("click", function(event) {
392+
myBtn.addEventListener("click", function (event) {
296393
var theme = event.target.pressed ? "sap_horizon" : "sap_fiori_3";
297394
var Conf = window["sap-ui-webcomponents-bundle"].configuration;
298395
Conf.setTheme(theme);
299396
});
300397
</script>
301398
</body>
302-
</html>
399+
400+
</html>

‎packages/main/test/pages/Icon_and_theming.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,14 @@
128128
<div>New icons since 5.11 and 4.23</div>
129129
<ui5-icon name="unsynchronize"></ui5-icon>
130130

131-
<div>New icons since 5.11 and 4.23 (latest)</div>
131+
<div>New icons since 5.11 and 4.23</div>
132132
<ui5-icon name="verified"></ui5-icon>
133133
<ui5-icon name="walk-me"></ui5-icon>
134134

135+
<div>New icons since 5.12 and 4.24 (latest)</div>
136+
<ui5-icon name="smart-watch"></ui5-icon>
137+
<ui5-icon name="vr-glasses"></ui5-icon>
138+
135139
<script>
136140
themeToggle.addEventListener("click", event => {
137141
const pressed = event.target.pressed;

0 commit comments

Comments
 (0)