Icon variable outline should be a prop

[codepretty]

Feature Request

Problem description

Setting outline variable on an Icon is common enough that I think it would make more sense and be a much simpler design to have outline be a prop instead of variable.

<Icon name="call-video" variables={{ 'outline': true }} />

Proposed solution

A much simpler way to describe an Icon that shows its filled state would be...

<Icon name="call-video" outline />

[layershifter]

Library	Link	State
Evergreen	https://evergreen.segment.com/components/icons/	Missing
MS Fabric	https://developer.microsoft.com/en-us/fabric#/components/icon	Missing
Material UI	https://material-ui.com/style/icons/	Has pattern, but the each Icon is a separate component (!)
Grommet	https://icons.grommet.io/	Missing
BlueprintJS	https://blueprintjs.com/docs/#core/components/icon	Missing
AtlasKit	https://atlaskit.atlassian.com/packages/core/icon	Missing
ReactIcons	https://www.npmjs.com/package/react-icons	Missing
AntDesign	https://ant.design/components/icon/	Has, as theme prop (!)
FontAwesome	https://fontawesome.com/icons/eye?style=regular https://fontawesome.com/icons/eye?style=solid	Has solid, regular and light. Icons in separate packages

---

I have mixed feelings about this prop 🤔

[layershifter]

After the internal discussion we decided to implement it. Reason: may be it's not to common concept in Icon components, but it's a common design word in icons (for example, https://nucleoapp.com/premium-icons).