identity-dev-streamline

Streamline

We are using FontCustom to compile a custom webfont using icons from the Streamline Icon Set.

Preview here: https://identity-dev.github.io/streamline/dist/streamline-preview.html

Usage

• Copy over the fonts from the /fonts directory, and _fontcustom.scss from the /stylesheets directory.

Syntax: <i class="sl-iconfilename"></i>

Naming Icons

CSS classes for the icons are based off their filename. These are the rules to apply when naming icons.

• Only lowercase letters and hyphens should be used
• Use hyphens for spaces
• Describe the illustration and not the intent. (i.e. house.svg vs address.svg)

Adding New Icons

To add new icons to the set, just clone this repo and install FontCustom.

On Mac (assuming you have Homebrew and Ruby installed):

• brew install fontforge ttfautohint
• gem install fontcustom

Add the new SVGs to the vectors directory, making sure the file names follow the rules that are stated above, then run: fontcustom compile vectors

Releases

git tag <tagname> && git push --tags

Troubleshooting

• If you receive any errors from FontForge while attempting to compile the icons, run: brew reinstall fontforge python

P.S. Be Strict

Lessons learned from our previous webfont.

• Really enforce this naming convention. A mix of capital letters and underscores leads to "ugh, let me pull up the preview page to see what this icon is called" when it should really be "I want that house icon, it's probably just sl-house"
• This font should be consistent since it is used to enforce our branding. Along the way we all need to be "The Art Director" enforcing the quality of these icons. They need to match and seem they belong to each other. Letting one icon slip leads to, "Well this other new icon fits in with this first icon that is the new style that we're building towards.
  • It's okay to adopt a new style, but like we're doing with streamline, it should be all at once or not at all.
  • By not following this, you can (and we did) end up with various line weights and a mix of solid vs "knocked-out" icons.
  • Wherever you are along the way, if there is discussion of adding a new icon that doesn't match the style of streamline, push back against it.

HOW TO DO ICONS

1. Find the icon in one of the files from source_files directory

2. Copy the icon

3. File > New

4. Set the artboard sizes to be 100 x 100px

5. Paste the icon

6. Expand the icon to the edges

7. Increase the stroke to be 4px

8. Outline the stroke

9. Open pathfinder window if it isn't open

10. Merge the paths with pathfinder (Unite)

11. Save

12. Set as an svg

13. Set svg settings