corykon
commented
3 years ago We have instructions on adding new icons to our custom icon font in the popbuilder readme that could a starting point for putting together a more general guide
IcoMoon Guide (see number 4 above)
We are currently using a custom icon font for our icon system. The icons used for this font are svg files found in client/images/svg. To use an icon, apply the icon-[nameoficon] class to an element, and that icon will be added to a :before psuedo element. Available icon classes can be found in client/app/assests/styles/icons/styles.scss. Never make a change in this file, as this code is generated by the IcoMoon app. There are helper classes for icons located in client/app/assests/styles/icons/_icons.scss. (Common things like rotated versions of icons, Filter type icons with background colors, etc.) This file can be edited/added to as needed.
To add an icon, follow this process:
- Convert the icon to an SVG file, add to client/images/svg. Best to have a someone who knows icons and svgs look at it, and make sure the it is approved for use by the UX team.
- Visit https://icomoon.io/app/ and upload all of our icons from the /svg directory.
- Select all the icons you've uploaded, and then click "Generate Font."
- On this next screen, click on the settings button (should be next to download button), and then do the following:
- Enter "pb-icons" for the font name.
- Uncheck support for IE8 and lower. We aren't supporting these, so we'll simplify the code that's about to be generated.
- Activate the option to generate SASS.
- Click "Download".
- Extract all files from the downloaded .zip.
- Move the font files (ppr-icons.svg, ppr-icons.ttf, ppr-icons.woff) to client/src/assets/fonts.
- Move the styles.scss and variables.scss files to client/src/styles/icons. Prefix the file names with underscores.
We could use some refreshing to our icons set as well as our documentation and guidance around icons.
1. Refresh & consolidate icons We need get on font awesome V6. The v4 stuff is dated. (Could consider waiting for v6.) We also have a bunch of custom icons sometimes we recommend our own particular custom icons over something font awesome has. Would be cool to have one big collection of approved font awesome stuff, and our custom stuff. Just one place to go for recommend/pre approved icons. We could package this refreshed set up as a single recommended set. Using a custom set that include font awesome stuff would preferable to installing ALL of font awesome alongside our custom set. (related: #1542, #1600)
2. More guidance on what icons to use In some place we could document what particular icons are generally for with in a UI, to maintain consistency.
3. Helper classes We could provide a set of helper classes for icons that do common things like sizing, rotating, animating, coloring, etc.
4. Custom fonts w/ IcoMoon For devs willing to go another step, it might be nice to include a section on the icons page (or a guide somewhere else) that lays out the process of rolling a custom icon font w/ IcoMoon. For Popbuilder, we use a combo of hc-icons, fontAwesome icons, and custom icons, and roll them into a single font file. This is more efficient size-wise compared to options number 1.