grommet-icons
grommet-icons copied to clipboard
GooglePlay icon group broken
The google play icon is wrapped a a <g>
tag and when I color the icon, it disappears
ie
{<GooglePlay color="plain" />}
renders fine, but
{<GooglePlay color="orange" />}
does not.
It generates the following HTML:
<svg aria-label="GooglePlay" viewBox="0 0 24 24" class="StyledIcon-ofa7kd-0 bfWHQO" style="">
<g fill="none" fill-rule="evenodd">
<polygon stroke="#444" stroke-linejoin="round" stroke-width="2" points="3 2 3 22 21 12"></polygon>
<path stroke="#444" stroke-width="2" d="M3,2 L14,16"></path>
<path stroke="#444" stroke-width="2" d="M3,8 L14,22" transform="matrix(1 0 0 -1 0 30)"></path>
</g>
</svg>
And nothing shows up.
When I check the inspector, the <g>
tag has the following CSS associated with it:
If I remove the <polygon>
and 2 <path>
tags from inside the <g>
tag, I have the following HTML:
<svg aria-label="GooglePlay" viewBox="0 0 24 24" class="StyledIcon-ofa7kd-0 bfWHQO" style="">
<polygon stroke="#444" stroke-linejoin="round" stroke-width="2" points="3 2 3 22 21 12"></polygon>
<path stroke="#444" stroke-width="2" d="M3,2 L14,16"></path>
<path stroke="#444" stroke-width="2" d="M3,8 L14,22" transform="matrix(1 0 0 -1 0 30)"></path>
</svg>
And the <polygon>
and 2 <path>
tags have the following CSS associated with them:
So, I think this can be fixed by explicitly adding a stroke: inherit;
style to the <g>
tag or removing the <g>
tag completely.
I'm happy to put up a PR doing either.