React-fontawesome: Feature request: fa-layers-text support

[tomhuze]

Request: add ability to layer text on top of icons as in the SVG + JS version of Font Awesome and described in the FA documentation.

[fillon]

Is there a workaround solution ?

[avshyz]

To be honest, using a span with .fa-layers-text worked for me.

[robmadole]

Yep, the workaround for this is just using the class and span manually. We haven't gotten around to adding a component that will do this yet.

[Rc85]

Yep, the workaround for this is just using the class and span manually. We haven't gotten around to adding a component that will do this yet.

The problem is that you cannot use the attribute data-fa-transform to transform the text.

[bgaynor78]

As @Rc85 points out, you _can_ use the workaround for rendering, but if you need to use transforms to alter the text layer, you are out of luck. Would it be possible to add an extra prop, say isTextLayer and then you could do something like:

<FontAwesomeIcon
  isTextLayer
  transform="shrink-6 right-2 up-2"
>Txt</FontAwesomeIcon>

which in theory would output:

<span class="fa-layers-text" data-fa-transform="shrink-6 right-2 up-2">Txt</span>

I know that using children in the element declaration is a divergence from the default of using the icon prop, but I feel like it's closer to how you'd specify a text layer in the JS docs.

Still though, that doesn't answer the question of how to get the transform prop to do what it needs to do. Not sure I have the knowledge to know where to start on that. It's just a proposal at this point. If pointed in the right direction, I could try to make an attempt at a PR.

EDIT: Also, as an aside, you could just use plain ol' CSS to mimic what FontAwesome is doing with the transforms to get you around the "no transforms" issue.

[barrychapman]

Is this on any roadmap to be added? this would be very helpful to have