# identity-dev-streamline > Identity.com Steamline icon set. Latest version **1.0.16** (published 2018-02-13) · 0 weekly downloads ## Install ```sh npm install identity-dev-streamline pnpm add identity-dev-streamline yarn add identity-dev-streamline bun add identity-dev-streamline ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.16 | | Published | 2018-02-13 | | First published | 2017-10-25 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 5.5 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Tyler Childs | | Maintainers | abodnar-svitla, tylerchilds | ## Links - npm: https://www.npmjs.com/package/identity-dev-streamline - Repository: https://github.com/identity-dev/streamline - Homepage: https://identity-dev.github.io/streamline/ - Issues: https://github.com/identity-dev/streamline/issues - npm.io page: https://npm.io/package/identity-dev-streamline ## Recent versions - 1.0.16 (latest) — 2018-02-13 - 1.0.15 — 2018-02-12 - 1.0.14 — 2018-02-02 - 1.0.13 — 2018-01-10 - 1.0.12 — 2017-11-28 - 1.0.11 — 2017-11-27 - 1.0.10 — 2017-11-21 - 1.0.9 — 2017-11-21 - 1.0.8 — 2017-10-25 - 1.0.7 — 2017-10-25 ## README # Streamline We are using [FontCustom](http://fontcustom.com/) to compile a custom webfont using icons from the [Streamline Icon Set](http://www.streamlineicons.com/preview-ultimate.html). 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: `` ## 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 && 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 ![Copy icon](https://raw.githubusercontent.com/identity-dev/streamline/master/instructional_images/0010_copy.png?token=AAYA6HUIVERL3mkU1Kl_q3-WO0oq45sOks5aJaZ8wA%3D%3D) ### 3. File > New ![New file](https://github.com/identity-dev/streamline/blob/master/instructional_images/0020_new.png?raw=true) ### 4. Set the artboard sizes to be 100 x 100px ![Artboard dimensions](https://github.com/identity-dev/streamline/blob/master/instructional_images/0030_artboard.png?raw=true) ### 5. Paste the icon ![Pasted icon](https://raw.githubusercontent.com/identity-dev/streamline/master/instructional_images/0040_paste.png?token=AAYA6ObpDiVMGNPg17IZzL9N5ZC5f8Lzks5aJajHwA%3D%3D) ### 6. Expand the icon to the edges ![Expanded icon](https://raw.githubusercontent.com/identity-dev/streamline/master/instructional_images/0050_resize.png?token=AAYA6PR-4e-ERzgJ-BNIFHycAVB2Zhy7ks5aJajXwA%3D%3D) ### 7. Increase the stroke to be 4px ![Stroke increased](https://github.com/identity-dev/streamline/blob/master/instructional_images/0060_stroke.png?raw=true) ### 8. Outline the stroke ![Outlined stroke](https://github.com/identity-dev/streamline/blob/master/instructional_images/0070_outline.png?raw=true) ### 9. Open pathfinder window if it isn't open ![How to open pathfinder](https://github.com/identity-dev/streamline/blob/master/instructional_images/0080_pathfinder.png?raw=true) ### 10. Merge the paths with pathfinder (Unite) ![Unite paths](https://github.com/identity-dev/streamline/blob/master/instructional_images/0090_merge.png?raw=true) ### 11. Save ![Save As](https://github.com/identity-dev/streamline/blob/master/instructional_images/0100_save.png?raw=true) ### 12. Set as an svg ![Svg type](https://github.com/identity-dev/streamline/blob/master/instructional_images/0110_svg.png?raw=true) ### 13. Set svg settings ![Svg settings, most importantly, embed](https://github.com/identity-dev/streamline/blob/master/instructional_images/0120_settings.png?raw=true) --- _Source: https://npm.io/package/identity-dev-streamline · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._