open-index/open-npm huggingface dataset:
npm package: @guidewire/web-font-builder
Description: the pebbles icon font builder tool
Author: Guidewire Software
Latest version: 0.0.1-alpha.10

# 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) ###
1. In PCF set the icon name field to the name of the svg file
2. 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) ###
1. 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
1. Install NodeJS locally
2. Navigate to the webresources folder of your Insurance Suite Application via a command line
3. execute `npx @guidewire/web-font-builder`
4. This will generate new font files, css files, and sass mappings
5. 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
1. Download the svg files from FontAwesome
2. Add them to the fa5 folders
3. Run the "Add New Icons" instructions

## Printing and Icons ##
1. 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