How can I alter FontAwesomeIcon properties outside the initial <FontAwesomeIcon /> call in Rea-CodePudding

I currently have a modal where the user can pick from a large flatlist of icons. All have size: '45' and color: 'white'. When a user selects an icon, the modal is closed and their selected icon appears on the card (this feature is one that allows the user to create a custom card).

I then have a feature that allows the user to change the line colour from white to black and visa versa on the card to contrast with their selected background colour. I would also like the colour of the icon to change with the lines, but I cannot find a solution! The icon object itself is read-only and using a StyleSheet seems to only apply styles when it is referenced within the original call like:

<FontAwesomeIcon icon={archive} style = {styles.text} />

I can't seem to wrap it in a styled view and then change the style from there.

Any ideas on how to alter the colour? And the size while I'm asking?

CodePudding user response：

You can make state like this :

const [style,setStyle]=useState()

You change state with user color, and apply it to your FontAwesome icon

<FontAwesomeIcon icon={archive} style = {style} />

CodePudding user response：

Thanks for the answers! I ended up creating a library to reference and just passed the library prefix (fab, far, fas) and the icon name (coffee, archive, wifi). Then used:

<FontAwesomeIcon icon={[icon.props.icon[0], icon.props.icon[1]]} style ={blabla} size = {blabla} />

Meaning I can now manipulate the size and colour wherever I want! Very handy.