Adding icons
Adding icons is not complicated. We just have to follow a few simple rules.
General Size
Each icon should be in a 24x24px bounding box. Ensure this by taking the used icon from a figma file, and putting it in a 24x24 box in a different file.
Online tools for editing SVGs:
Content size
The content of the icon can vary in size. Ensure it has a similar "weight" by placing it next to a different icon in the same size. For most "rectangular" icons, the larger side can be up to 18px in length. There are however, icons that are deviating from this. There is likely a Material Icon that you can copy the contents of in that case and call it a day.
Exporting from Figma
Use a Svg to JSX plugin to export the SVG.
Make sure to remove any html attributes that are setting colors. Coloring is handled by the SVGIcon component.
Naming
We use round icons. So the name has to reflect that. Suffix every icon with Rounded. A few examples:
- Settings -> SettingsRounded
- Notification -> NotificationRounded
Each icon is placed inside a folder under frontend-icons/src and has a single file index.tsx. This file has a named export that is the icon named, suffixed of course.
The icons are then exported from src/index.ts file.
Versioning and releasing
We're using semantic versioning. And because we're mostly adding icons, this means you most likely just need to bump the minor (major.MINOR.patch) part of the version.
The steps assume you're inside frontend-ui/packages/frontend-icons
- Bump version:
npm version minor - Build icons:
yarn build - Publish on npm:
npm publish - Go to the docs package:
cd ../frontend-ui-docs - Install latest version:
yarn add @streamelements/frontend-icons - Push and create a pull request
- Have someone review
- Merge
- ???
- Profit