New Icon Component proposal

[ohmyguigs]

Overview

The proposal here is to make a Single Icon component to rule them all, and at the same time solve problems of default sizing, optical compensation. The studies for the new model for icons is being handled by @davicosta99

Purpose

It should follow these constraints:

• this component should have a name prop, which will decide which SVG it will use (propably getting the SVG from the theme, declaring the SVGs in a sort of styles.json will allow goCommerce and VTEX to have different SVGs. Me and @TasGuerciMaia had the idea of using actions as icon names, that will uncouple the actual image of the icon from the context it is being used or applied. An example would be back as an icon name instead of arrow, the back action can be expressed with different images, but an arrow is always an arrow)
• component should respect a squared canvas size with a default size (this will imply that our icons are all capable of fitting inside a squared canvas, same height and width, without being distorted. Also the icons should handle their each Optical compensations by themselves. For example if an icon is visually heavier on the right and need a little padding to addapt when postioned alongside other icons, this specific icon should deal alone with this compensantion. This will bound the SVG drawing and it's necessities in a single business logic bundle)

Context

• we are centrilizing these problems here: vtex/styleguide/issues/430 and vtex/styleguide/issues/217

Examples

// TO DO

[ohmyguigs]

@emersonlaurentino gave some ideias for the implementation that I tried to explain above. You can talk to him or me in case of any doubt.

[augustocb]

@davicosta99