@guidewire/web-font-builder

Guidewire Icon Font Builder for Insurance Suite Applications

This package should be used via nvm @guidewire/web-font-builder from the webresources directory of your Insurance Suite Application This tool is only required if you've added new icons, or modified existing icons.

Icons

Icon fonts are generated from folders of SVG files.

Placing an svg file in the gw folder, or in the fa5 folder, and then running the font build process will update the various font files, and SASS mappings

To use an existing icon glyph in a PCF (Most Common)

• In PCF set the icon name field to the name of the svg file
• Set the icon Type to the correct setting. svgFile for the standard gw font, gwFontGlyph for the (currently setup as Font Awesome 5 Free), or the customer option if you've added a completely new font face.

To use an existing icon in SASS (Less Common)

• Almost every icon in the client, defined via SASS, will have a global themeable variable

• meaning, if it's an icon in the north panel, not defined via PCF, then look in NorthPanel_themeable.scss and you'll likely find something like gw-NorthPanel--unsaved-work-icon-glyph: "bookmark" !default;
• override the variable in you theme file to point to another icon glyph. If it's a gw icon, just use the glyph name, if it's a FontAwesome glyph, use the name for regular, or name-solid for solid, or name-light for light

Add New Icons

• Add the icon.svg file to the gw icon folder

• Install NodeJS locally
• Navigate to the webresources folder of your Insurance Suite Application via a command line
• execute npx @guidewire/web-font-builder
• This will generate new font files, css files, and sass mappings
• These new files need to be checked in. Currently, this will cause a snowcat upgrade error, and modified files like font.css will be overwritten, work on that is in progress

Adding Support for FontAwesome5 Pro

• Purchase a license from FontAwesome for the Pro fonts

• Download the svg files from FontAwesome
• Add them to the fa5 folders
• Run the "Add New Icons" instructions

Printing and Icons

• If a new icon is added or modified and is also used as part of the custom internal application PDF printing process (NOTE: this is NOT standard browser printing), AND that icon needs to be displayed in the final PDF (very few do), then a png file needs to be present in webresources/img/app/print-png following the naming pattern of print.svgFileName.[icon name here].png -We have provided export-png.js as a means of converting existing svg files to png files, but there are many free, and better, online alternatives