🧱 ZUI: Icon

[ziggabyte]

Description

When we use icons we need it to be simple and easy to make them confirm to our style.

Screenshots

Figma link

You need to be logged into a Figma account to properly view the Figma content.
https://www.figma.com/design/yIQMDEFSgkUOrSaJpg3k7N/ZUI?node-id=11033-145247&t=WTbaUbn5r6vpwXpe-4

Requirements

• Can set size (small, medium, large)
• Can take in an icon
• The sizes and other styles confirm to the styles as described in Figma

Open questions

Ask the designers if it's a correct interpretation of the Figma design to say that icons should always have the gray color they are show with in Figma.

Possible implementations

My (ziggi's) thought is to look at how the reference to an icon is passed as props to, for example, the ZUIIconButton component.

Develop this using Storybook. We want all the design system components to be documented through their own Storybook stories.

For reference, you can look at the already existing ZUI components created on the undocumented/new-design-system branch (not ZUI components that exist on main, as they are not part of the new design system.)

Git

The main git branch for the work on the new design system is undocumented/new-design-system. Unless otherwise instructed, do your work on a new branch branched off from this branch.

Name your branch issue-number/zui-name, ex: issue-928/zui-button for a branch where work is done that is documented in the issue with number 928, where a button component is being made.