f10-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

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

Vue

<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] 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. Bump the library where it's being used, ie glaze-joinery, veneer, retail, etc.
10. Add new icons to _shop_style ( this should happen automatically now since the Style guide Icons section was updated to iterate through the list )
11. 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/style-guide
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