Open Source Blogs
Immerse yourself in SAP open source! Discover collaborative projects, insights into the latest technologies, and best practices in open source development.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member786693
Participant
 

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. 
2 Comments
Top kudoed authors