Icon: Improve "fill" color

[ItsJonQ]

This idea came from the recent Icon component + package refactor, https://github.com/ItsJonQ/g2/pull/133/files/eb4a8c7ff3e643569bd26a2f62516c9ea99258e3#r525559793

Because @wordpress/components uses fill for it's Icon colors (vs. color from react-icons), we needed to add the fill CSS property to various styles (e.g. BaseButton) to accommodate this.

Problem

I can imagine this not scaling well, as components (G2 or not) may need to adjust icon color from a higher node vs. direct manipulation through <Icon fill="red" />. In the case of Button, by default, we want the Icon to absorb the (text) color from the Button.

Solution

I think we can do this for Icon.js

        sx.fill = css({
            color: fill,
            fill: 'currentColor',
        });

We're still passing in the fill prop into <Icon fill="red" />. However, the Icon will use that for the color CSS prop instead, and fill will absorb it through currentColor.

Here's a quick test of this solution working:

I've removed the recently added fill styles in BaseButton and used the currentColor strategy above. We can see that the X close icons are correctly absorbing the colors for the Alert.