SAP Fiori introduces a new family theme called Horizon. The theme of family has been evolving iteratively. However, this latest update takes more than just theme upgrades. See the previous post for more details.
Some components, for example, have changed not only their color, but also their design:
Switch in Quartz Light theme
Switch in Morning Horizon theme
Another update is included in the SAP Icon font. Some icons have been completely revamped, while others have undergone minor changes. However, the naming of the icons has not changed and if you are already using SAP Icons, there shouldn’t be any impact on your project. A comparison between the two icon versions is displayed below.
New Icons
Old Icons
The color mapping and SAP Font icon variants are created by a central design team and included in another npm package (theming-base-content) which Fundamental Library is consuming and building on top.
If you are looking to incorporate the SAP icons in your project, you can import either the latest icon font file SAP Icons for Horizon or the icon font Fiori 3. The documentation on how you can import the fonts by themselves can be found here.
Example:
SAP Icons for Horizon
If you would like to implement the SAP Icons for Horizon, you need to import:
@font-face {
font-family: "SAP-icons";
src: url("~@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff") format("woff");
font-weight: normal;
font-style: normal; }
Fiori 3
If you would like to implement the Fiori 3 icons you need to import:
@font-face {
font-family: "SAP-icons";
src: url("~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/SAP-icons.woff") format("woff");
font-weight: normal;
font-style: normal; }
Follow the Fundamental Library Styles Community to stay tuned for the updates. If you have any questions feel free to post them in the comment section below or in SAP Community Q&A.
- SAP Managed Tags:
2 Comments
