An easier way to change duotone colors

[Rc85]

Is your feature request related to a problem? Please describe. I want to stay away from using .css or .scss files to style my duotone icons and use mainly inline styles or a framework's provided themes/styles (eg. Material UI).

Describe the solution you'd like Currently, I'm styling my duotone colors using class names in my .scss files. It gets tedious when I have many styles. A solution would be to add props to the <FontAwesomeIcons> component to change the primary and secondary color and opacity.

Currently, I'm doing this

.svg-inline--fa .fa-primary {
  fill: $blue;
}

.svg-inline--fa.fa-red .fa-primary {
  fill: $red;
}

.svg-inline--fa.fa-green .fa-primary {
  fill: $green;
}

.svg-inline--fa.fa-dark-red .fa-primary {
  fill: $dark-red;
}

.svg-inline--fa.fa-white-pink .fa-primary {
  fill: $light-red;
}

.svg-inline--fa.fa-white-pink .fa-secondary {
  fill: white;
  opacity: 1;
}

.svg-inline--fa.fa-grey .fa-primary {
  fill: $dark-grey;
}

.svg-inline--fa.fa-grey .fa-secondary {
  fill: $med-grey;
  opacity: 1;
}

.svg-inline--fa.fa-orange-white .fa-primary {
  fill: $orange;
}

.svg-inline--fa.fa-orange-white .fa-secondary {
  fill: white;
  opacity: 1;
}

.svg-inline--fa.fa-orange-reverse .fa-primary {
  fill: $light-grey;
}

.svg-inline--fa.fa-orange-reverse .fa-secondary {
  fill: $orange;
  opacity: 1;
}

.svg-inline--fa.fa-blue .fa-secondary {
  fill: $light-blue;
  opacity: 1;
}

.svg-inline--fa .fa-secondary {
  fill: $dark-grey;
}

Additional context Example of proposed solution

<FontAwesomeIcon icon={faStar} primaryColor={{ color: 'orange', opacity: 1 }} secondaryColor={{ color: 'orange', opacity: 0.5 }} />

If there is already an easier way without using class names, please advise.

[qbunt]

styling the duotone icons thru css custom properties like it is now makes it unreasonably difficult (and non-idiomatic) to change colors when a piece of state changes. This is the only react library I know of that does it this way

[robmadole]

@qbunt what is difficult about it? It's just applying standard CSS.

I think there may need to be some documentation updates around this feature. The visual look of the icons (colors, etc) should be kept in CSS (or at least expressed as CSS if a CSS-in-JS lib is used).

[qbunt]

Better docs could help @robmadole. What I guess I don't understand is exposing color as a prop, but not secondaryColor or opacity. If I'm using the duotone package, but need a single color icon in a component, I'm either adding style={{'--fa-secondary-color':'whilte'}} or trying to find the necessary class in that specific component simply to change the color. Not the end of the world, it simply seems like a lot to get a single color icon.