I would like to dynamically, partially fill a react-icons sourced Font Awesome Star using linear gradient. I have tried the following:
React Component with Inline Style - Setting the background of the parent span to gradient and making the SVG transparent. Can't seem to set the border around the SVG star to #FFFFFF so I see the parent span's whole background. See below:
import React from 'react'
import FaStar from 'react-icons/lib/fa/star'
const Stars = () => {
const inlineStyle = (pctFill) => {
return(
{background: 'linear-gradient(90deg, #134758 '+pctFill+'%, #d3d3d3 '+pctFill+'%)'}
)
}
return(
<div>
<span style={inlineStyle(50)}>
<FaStar />
</span>
</div>
)
}
export default Stars
I have also tried creating a linearGradient component and setting the path's fill="url(#component)", but react-icons path is the 3rd child to my parent span which I can't figure out how to access.
Please help