Fix the Figma icon

[dkotter]

Is your enhancement related to a problem? Please describe.

We show a Figma icon in our Figma Embed block but this icon isn't rendering as well as it should.

I got this file from here: https://www.figma.com/using-the-figma-brand/ and I copied the svg markup and put that directly into https://github.com/10up/figma-block/blob/d397f7e7e074671443162d12f61f0ec8ffcd04bc/src/assets/js/icon.js.

But it seems to be rendering slightly blurry or fuzzy, as you can see from the screenshot: https://github.com/10up/figma-block/blob/5c2b2dd6a66e810d87a869318e26c701f8dff8b2/.wordpress-org/screenshot-1.png

Not exactly sure what needs to change here but I'm guessing some adjustments to the svg markup may be needed for this icon to work properly in the block.

Designs

No response

Describe alternatives you've considered

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[dkotter]

For now I've switched over to using the black icon as it doesn't seem to have the same issue (or at least my eyes can't see an issue with it).

The assets Figma provides includes a black icon, white icon and color icon. I've added all three of these into our icons file: https://github.com/10up/figma-block/blob/develop/src/assets/js/icon.js so it's easy to try out different ones if we want.

Personally I think the color icon looks the best so would still be great to figure out how we can use that.

[faisal-alvi]

I've used IconColor and it does not look blurry or fuzzy for me.

[jeffpaul]

@faisal-alvi that looks good to me, want to push that up as a PR for review/merge?