React-fontawesome: Color does not work

[telmotrooper]

I'm using TypeScript, I've imported the icons as follows:

• In my parent component:

import { library } from "@fortawesome/fontawesome-svg-core"
import { fas } from "@fortawesome/free-solid-svg-icons"

library.add(fas)

• In the child components, where the icons will be used:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

• And using it like this:

<FontAwesomeIcon icon="check-circle" color="#6DB65B" size="6x" className="p-1" />
When attempting to add a color to my icon, the color is defined for svg component.

The problem is, instead of assigning the color as fill for the path, the color ends up as "color" in the svg element.

The previous example shows like this in the HTML:

<svg aria-hidden="true" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16 fa-6x p-1" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#6DB65B">
<path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
</svg>

Edit: The workaround I have for now is using a CSS selector to get the child component and paint:

.fa-check-circle > path {
    color: #6DB65B
  }

[Rycochet]

<FontAwesomeIcon icon="check-circle" style={{color:"#6DB65B"}} size="6x" className="p-1" />

[telmotrooper]

@Rycochet Still same behaviour as described, I even updated my dependencies today but it didn't change anything.

 @fortawesome/fontawesome-svg-core    ^1.2.2  →    ^1.2.4
 @fortawesome/free-solid-svg-icons    ^5.2.0  →    ^5.3.1

[robmadole]

@telmotrooper please provide a reproducible test case that we can look at using something like codesandbox.io.

[Barbabosco]

The workaround of @telmotrooper worked also for me. Thx a lot!!

[bichotll]

Same issue here. I'll try to reproduce it in codesandbox if I can find a bit of time.

[bichotll]

It seems to be working...

https://codesandbox.io/s/gifted-cloud-uqscf?file=/src/App.js

I'll try to figure out what is going on.

[bichotll]

I deleted package-lock, reinstalled all the packages again and yet, no improvement.

I will just use the workaround for now.

[tristan957]

I am confused how it works in the code sandbox and doesn't work on my personal site. I am not doing anything different.

[monmonmon]

I met the same issue and I found out it was because a global css color definition like * { color: #xxxxxx } preceeded the prop setting, in my case.
css class like this worked for me:

.icon {
  * {
    color: red;
  }
}

<FontAwesomeIcon icon={faFilm} className="icon" />

[MPaluszynski]

@monmonmon
Thanks a lot, wouldn't thought of that