Support fill prop for gradient fills.

[acorn1010]

Is your feature request related to a problem? Please describe. I want to use a gradient fill with <FontAwesomeIcon />. Attempting to set the fill property doesn't get picked up by the <path /> child (instead it uses the default fill="currentColor"). Using the fill prop is important because the color prop doesn't support gradients.

Describe the solution you'd like

<FontAwesomeIcon icon={faUser} fill='url(#someSelector)' />

Describe alternatives you've considered I tried creating a wrapper around <FontAwesomeIconFill />, but this involves some very hacky code to get the result from a ReactComponent's #render method and then replacing all child component's fill prop with my own fill. Example code:

<FontAwesomeIconFill fill='url(#someSelector)'>
  <FontAwesomeIcon icon={faUser} />
</FontAwesomeIconFill>

I also tried using a CSS style, but it seems like the fill prop takes precedence:

<FontAwesomeIcon icon={faUser} style={{fill: 'url(#someSelector) !important'}} />

Additional context Here's an example of <FontAwesomeIcon icon={faUser} />. The faUser SVG on the left is what happens right now. The SVG on the right (the colorful one) had its <path /> element's fill prop manually removed so that it defaults to the CSS fill of the <svg /> parent tag.

Here's an example of a url(#someSelector) fill that I found on StackOverflow (it's the one used in the above example pic):

<svg width="0" height="0">
  <radialGradient id="someSelector" r="150%" cx="30%" cy="107%">
    <stop stopColor="#fdf497" offset="0" />
    <stop stopColor="#fdf497" offset="0.05" />
    <stop stopColor="#fd5949" offset="0.45" />
    <stop stopColor="#d6249f" offset="0.6" />
    <stop stopColor="#285AEB" offset="0.9" />
  </radialGradient>
</svg>

Please let me know if there are any solutions. I searched around, but wasn't able to find one. Thank you so much!