Oqton Icons

Naming Icons

• Icons are not named after what they look like but after their purpose.
  • e.g. Delete instead of Trashcan.

  • This avoids problems when we want to change the visual paradigm of actions.

• Icon names cannot begin with a number. This is due to javascript not allowing variable names that begin with numbers.
  • Instead of 3D-Viewer, use ThreeD-Viewer.
• The icon name should contain no spaces. If a separation is necessary between words, use a hyphen.
  • e.g. Foo-Bar instead of Foo Bar
• Different sized icons with the same purpose should be named identically.
  • e.g. Icons - 12px/Add.svg and Icons - 16px/Add.svg

Export from Sketch to Front End

1. Select new artboards and choose Make Exportable in the .svg format.
2. Create new local branch in the Oqton/Platform repo.
3. Choose File > Export in Components - Icons.sketch.
4. Save Files in src/svgs.
5. Navigate to that folder in Finder, select the folder and choose CMD+C
6. Open Terminal and type cd and then choose CMD+V
7. Type yarn update-icon-library
8. Review and commit all changes
9. Create new PR from the branch

Some icons are animated or dynamically generated. Those artboards don't export svgs.

Converting svgs to React components.

yarn update-icon-library

Generate a named export for every svg file to be used in our icon library. This should be run whenever new svgs are added to the icon library.

NOTE: SVGs should not contain or tags with generic "IDs". These can cause unexpected behaviour when styling icons colours.