feat: icon abstraction layer for PS 1.6-9.x compatibility

Add esIcon() JS helper and renderIcon() PHP helper that auto-detect
the icon framework (Material Icons on PS 8+/9+, FontAwesome 4 on PS
1.6/1.7) and render appropriate HTML. Includes bidirectional mapping
between FA4 class names and Material Icons names.

- Replace all hardcoded <i class="material-icons"> with esIcon()/renderIcon()
- Add FA4_MAP (Material→FA4) and reverse FA4→Material mapping in both JS and PHP
- Add detectIconMode() with PHP data-attribute hint and font-family probe fallback
- Fix 4 self/this scope bugs in esIcon calls across _methods.js, _tree.js, _preview.js
- Add esIconUpdate() for dynamically updating existing icon elements
- Add normalizeIconName() to handle both FA4 and Material input formats

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-01 14:47:50 +01:00
parent 55e3135903
commit 1945da88b2
82 changed files with 56654 additions and 5364 deletions

View File

@@ -332,7 +332,7 @@
color: darken($es-primary, 10%);
}
i.material-icons {
i {
font-size: 14px;
}
}
@@ -831,7 +831,7 @@
color: $es-text-secondary;
}
i.material-icons {
i {
font-size: 18px;
}
}
@@ -853,7 +853,7 @@
color: $es-text-muted;
font-size: $es-font-size-sm;
i.material-icons {
i {
font-size: 20px;
}
@@ -868,7 +868,7 @@
padding: $es-spacing-xl 0;
color: $es-text-muted;
i.material-icons {
i {
font-size: 48px;
opacity: 0.4;
margin-bottom: $es-spacing-sm;
@@ -978,7 +978,7 @@
border-bottom: 1px solid $es-border-color;
background: $es-slate-50;
i.material-icons {
i {
font-size: 18px;
color: $es-text-muted;
}