Create Icon component

[timroes]

We would like to use more custom SVG icons over just using Font Awesome. We should create a custom Icon component that aligns handling those icons. At the moment we're just exporting custom React components for each of them, which all come with a bit different behavior (regarding size, how we handle colors, etc.).

I think the new icon component should do the following:

• Allow specifying the icon type as a string, so it's easier usable, e.g. <Icon type="caret" />
• Should allow specifying size of the icon in shirt sizes, e.g. <Icon size="md" /> to match our regular icon sizes we have (and align them.
• Allow specifying color for the icon from a predefined set of colors we usually use or text for using currentColor.
• Allow specifying a className as we should for all base UI components.

That could allow us to manage the actual icons even in pure svg files if we want. We could consider loading all icons in one svg once only on the page and referencing them via symbol and use so we don't need to duplicate the icon SVG if we have an icon used multiple times on the same page.

Tasks

Preview Give feedback

1. Create Icon component #22433
   area/frontend +1
   
2. Support color and size
3. Replace existing icon usage with new component #24594
   area/frontend platform-move/requires-grooming team/platform-move +3
   
4. Enable all SVG icons in icon component #24595
   area/frontend platform-move/requires-grooming team/platform-move +3
   
5. https://github.com/airbytehq/airbyte-internal-issues/issues/1601
6. [Spike] Explore SVG icon optimization #24598
   area/frontend platform-move/requires-grooming team/platform-move +3
   

[octavia-squidington-iv]

cc @airbytehq/frontend

[edmundito]

@krishnaglick Reassigning this to you!

[krishnaglick]

@timroes What do you mean about color. Are just generic css color's fine?

[timroes]

@krishnaglick I think we want to have a limited set of colors only available, like "primary", "subdued", or such. We'd need to actually check what colors we're at the moment using in our UI, and what colors we can break that down to. Might be worth syncing with Nico about which colors we'll need exactly.

[Upmitt]

@krishnaglick @timroes - I did this list of colors used for icons https://www.figma.com/file/gMNRYVJav25pdsoxAyW7Qp/00_01_WEB-APP-LIBRARIES?node-id=2514%3A4578&t=2dhs2PhfGlCBSMY6-4 - do you want to plan a meeting to talk about it?

[timroes]

@krishnaglick @timroes - I did this list of colors used for icons https://www.figma.com/file/gMNRYVJav25pdsoxAyW7Qp/00_01_WEB-APP-LIBRARIES?node-id=2514%3A4578&t=2dhs2PhfGlCBSMY6-4 - do you want to plan a meeting to talk about it?

Thanks for the list.

Is there a chance that we can narrow down the amount of grey shades a bit for colors we want to use in the future? It looks like we might not need that amount of slightly different shaded greys?

[Upmitt]

@timroes yes sure! I'll do that, just need to check different screens before reducing this list

[flash1293]

These icons are used in designs by @Upmitt , they should be available in the webapp as well: https://www.figma.com/file/gMNRYVJav25pdsoxAyW7Qp/00_01_WEB-APP-LIBRARIES?node-id=2%3A394&t=p4l9lbH6hV6iquOX-0

[krishnaglick]

My current color shortlist is "primary" | "darkBlue" | "action" | "grey" | "success" | "error" | "warning"
I think we could remove darkBlue. Maybe rename grey to disabled?
Text uses darkBlue and grey I believe, so maybe they're worth keeping. The colors are typed so I'm not super concerned.

[josephkmh]

"primary" | "darkBlue" | "action" | "grey" | "success" | "error" | "warning"

Can I suggest that we only use semantic names, not names of colors ("darkBlue" | "grey")? I guess that's what you're getting at @krishnaglick.

IMO "action" is also kind of ambiguous. I would almost prefer the "primary" | "secondary" | "tertiary" pattern there instead if we can't come up with a different meaningful name.

[krishnaglick]

Bump @Upmitt This is lower priority than what you're busy with but just want to keep this on your radar!

[josephkmh]

@krishnaglick any update on this component? Would be great to get it built asap, because it is a building block for some other UI library components.

[edmundito]

Spoke with @chandlerprall, he will take over this

[josephkmh]

@chandlerprall are we able to close this issue now? Looking at https://github.com/airbytehq/airbyte-platform-internal/pull/7709/files

[chandlerprall]

This is also tracking other icon component issues - tasks in the description. I don't have a preference if we want to keep this around as a meta issue or close it. Feels more like Tim's brain child for icon asks, so maybe wait for him to get back and see what a preference may be?

[timroes]

Closing as we have a solid Icon component by now.