Fortawesome reactjs icon colors in css

Question

I have several Fontawesome tags spread across several components. Their color attribute is currently being hard-coded to a custom color HEX code. I want to centralize this color code in css, so that if needed I would just change it one place. Is this possible?

<FontAwesomeIcon icon={faThumbsUp} 
                        size="sm" color="#7ACC35"/>

Answer 1

Yes you could do that, just use className and define your in css file

.CustomColor {
  color: red;
}

.CustomColor2 {
  color: green;
}

.CustomColor3 {
  color: blue;
}

<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor2" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor3" />

Codesandbox demo