grommet-icons icon indicating copy to clipboard operation
grommet-icons copied to clipboard

GooglePlay icon group broken

Open StefanoDeVuono opened this issue 4 years ago • 0 comments

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: Screen Shot 2020-06-30 at 4 38 55 PM

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: Screen Shot 2020-06-30 at 4 39 56 PM

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.

StefanoDeVuono avatar Jun 30 '20 23:06 StefanoDeVuono