Size 100% doesn't render the text properly

[MarcoCatalan]

When you specify a size of 100%, the text inside doesn't render properly. It renders very small and not centered
I believe this is caused by:

• The division by 3 when calculating the fontSize. If you specify a percentage it is not relative to the parents height, but to the parent text-size (1em). Making the fontSize relative to the parents height looks like a very tricky problem to solve.
• The same happens with the line-height attribute. Maybe another technique for centering should be use, such as flexbox (?)

[MarcoCatalan]

Looks like someone made a React fork of the FitText plugin which may be useful in this scenario (http://softwarepsychonaut.com/react-fittext/)

[MarcoCatalan]

In my opinion, a much better option would be to use svg's to render the icons. I made a couple of tests and it works flawlessly without the need to define a fixed size, just matching the parent size:

-https://codepen.io/anon/pen/oPBGNa
-https://codepen.io/anon/pen/bxgoWe

[JorgenEvens]

Sadly the SVG approach breaks down as well when we consider that not all initial have exactly two characters in them.

[JorgenEvens]

This issue has been fixed in the v3.3.0 release. Thanks for the bug report and the help looking for a solution!