# f10-icons

[![npm version](https://badge.fury.io/js/%40framebridge%2Ff10-icons.svg)](https://badge.fury.io/js/%40framebridge%2Ff10-icons)

## Overview

This is Framebridge's icon library – designed to match the brand and built from scratch to fill the need for framing related symbols in addition to the standard ui set. This repo is meant to be used as a direct dependency in consumer facing apps.

## Use

`npm i @framebridge/f10-icons`  

### Slim

```javascript
= f10_icon("f10-icon-arrow-left")
```

### Vue

```javascript
<template>
	<f10-icons
    class="mobile-button"
    :name="'f10-icon-arrow-left'"
  />
<template>
...
import f10Icons from "@framebridge/f10-icons/vue/F10Icon.vue";
...
const component = {
...
	components: {
    ...
    f10Icons
  }
...
}
```

## Design Rationale

Build with basic shapes. Reuse and cut/crop existing shapes before drawing new ones. This, along with a consistent outlined 2px path is meant to support a cohesive, unique look. _Less is more_.

## Adding or Editing

You'll need access to the internal Framebridge shared design folder on Google Drive to contribute.	
Editable vectors live there at [[Product Design Shared Google Drive/Templates_Libraries_Assets/Icons/source_and_exports]](https://drive.google.com/drive/folders/1Pf5Kyw0Z0ut7z8SuFWyfcXtLQEMh3Vjn?usp=sharing) in Adobe Illustrator format. The main working file is called `f10-icon-set-rounded-24px-optimized-working.ai`. Each icon has it's own artboard titled with the icon name, in kebab-case. This file may include "work in progress" drafts or explorations for icons, to identify those non-final iterations prepend "WIP-". Keep designs contrained to `#1D2019` 2px rounded terminal stroked paths. 

To export a new or revised icon, create a new artboard in the export file: `f10-icon-set-rounded-24px-optimized-outlined-black.ai` titled with the final name, paste in the stroked vector (making sure to obey the grid), outline it's paths using Object > Path > Outline Stroke, 'Unite' in the Pathfinder>Shape Mode panel, and insure the icon is now a single path with a `#1D2019` fill. Export as... SVG with 'Use Artboards' checked, using the following config: Styling: Internal CSS, Font: SVG, Images: Preserve, Object IDs: Minimal, Decimal: 1, not Minified or Responsive. 

Manually reformat the revised .svg files in a code editor to follow the formating in other existing icons. `f10-icon-arrow-left` is great one to reference. Add those new files to the repo and add listings to `index.js` as needed.

### Exporting a new or revised icon

0. In Illustrator, under 'Preferences > Guides & Grid', set 'Gridlines every:' to 1px and 'Subdivisions' to 8, toggle 'Show/Hide Grid' in View dropdown menu and set 'Snap to Grid', 'Snap to Pixel', 'Snap to Point' all to On. In the working file, it's nice to have 'View > Pixel Preview' on for insuring these vector icons look good when rendered in pixels 
1. Create a new artboard in the export file: `f10-icon-set-rounded-24px-optimized-outlined-black.ai` titled with the icon name, option + drag to duplicate an existing artboard, make sure to align to the existing grid, note the # of the artboard that preceeds the name
2. Paste in the stroked vector (making sure to obey the grid), from the working file, Shift + Command + V to paste in place relative to location on copied artboard 
3. Outline the paths 'Object > Path > Outline Stroke'
4. 'Unite' in the Pathfinder>Shape Mode side-panel  and insure the icon is comprised of as few paths as possible, with a `#1D2019` fill
5. 'File > Export > Export as...' SVG with 'Use Artboards' checked and selecting the # you noted in step 1, check 'Suffix' to print the artboard name in the filename, using the following config in the result dialog: Styling: Internal CSS, Font: SVG, Images: Preserve, Object IDs: Minimal, Decimal: 1, not Minified or Responsive Manually
6. Rename and reformat the revised .svg export files' source in a code/text editor like VScode to follow what's in other existing icon svgs. `f10-icon-arrow-left` is a great, simple one to reference. generally you'll add a `<title>` tag with a Capitalized name and make sure the `<style>` is `.a { fill: #1d2019; }`
7. Add those new files to this repo's 'svg' folder on your machine and add listings to `index.js` as needed.
8. Make a PR on Github with a version bump in the 'package.json' file
9. Run `npm publish` in local directory once PR has been merged
10. Bump the library where it's being used, ie glaze-joinery, veneer, retail, etc. (`yarn upgrade @framebridge/f10-icons`)
11. Add new icons to `_shop_style` ( this should happen automatically now since the Style guide Icons section was updated to iterate through the list )
12. Don't forget to save any changes the vector source files in the shared folder to keep them up to date 

### Previewing locally

1. `yarn link` in this repo's local directory
2. `yarn link @framebridge/f10-icons` in the target project, for `glaze` you should now be able to preview locally at `http://host.docker.internal:3005/apps/designer/icons` (you may need to remove your node modules if not seeing them)
3. `yarn unlink` in this repo's local directory when you're done

### Register new version on npm

1. run `npm publish` in local directory once PR has been merged

### Using the new version

1. In projects with existing dependency, `yarn upgrade @framebridge/f10-icons` to repoint to most recently published version of npm module. This requires a new version to have been registered as outlined above. As of 1/26/2023 this is a direct dependency in: `glaze-joinery`, `glaze-joinery/veener`, and `retail`

2. `npm i @framebridge/f10-icons` to use in new project