Swap the Legacy Widget block icon (with version that matches icon template more closely)

[critterverse]

The Legacy Widget block icon stands out from other icons due to it being slightly bigger. I've recreated the icon at the correct scale based on the Design Library icon template:

This will especially help when seeing lots of icons together in the Inserter:

The new icon can be found in the Figma Design Library: https://www.figma.com/file/e4tLacmlPuZV47l7901FEs/WordPress-Design-Library?node-id=5415%3A22557

[manooweb]

Starting on this 😉
Is there someone to assign me to the issue?

[manooweb]

I took a look and try to export the new icon from Figma.

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"  fill="none">
	<rect x="4.75" y="5.75" width="14.5" height="14.5" rx="1.25" stroke="#1E1E1E" stroke-width="1.5"/>
	<rect x="11" y="11" width="2" height="2" fill="#1E1E1E"/>
	<rect x="7" y="11" width="2" height="2" fill="#1E1E1E"/>
	<rect x="15" y="11" width="2" height="2" fill="#1E1E1E"/>
	<rect x="5" y="8" width="14" height="1.5" fill="#1E1E1E"/>
	<rect x="6" y="3" width="2" height="3" fill="#1E1E1E"/>
	<rect x="16" y="3" width="2" height="3" fill="#1E1E1E"/>
</svg>

and took a first try in the code and got this result

and when the legacy widget block is selected and the icon hovered in the block toolbar

Then if I corrected the first <rect> tag with a fill="none" attribute I got the right result

But hovering the icon in the block toolbar no longer works.

I also notice that all the other icons use <path> tag instead of <rect> one.

So I wonder several questions before proposing a pull request:

• Did I export correctly the icon from figma?
• Does something miss in the svg icon to make it work correctly?

Thanks for your help.

[critterverse]

@manooweb I'm not sure whether this affects anything here or not but I went back into Figma and simplified the shapes in the icon as much as possible (I made a union selection of all the shapes and removed an inner frame).

Curious whether that makes any difference at all?

[manooweb]

@critterverse sorry for the late answer.

LGTM 👍 As I tested with the new version exported from Figma and looks like

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3H8V5H16V3H18V5C19.1046 5 20 5.89543 20 7V19C20 20.1046 19.1046 21 18 21H6C4.89543 21 4 20.1046 4 19V7C4 5.89543 4.89543 5 6 5V3ZM18 6.5H6C5.72386 6.5 5.5 6.72386 5.5 7V8H18.5V7C18.5 6.72386 18.2761 6.5 18 6.5ZM18.5 9.5H5.5V19C5.5 19.2761 5.72386 19.5 6 19.5H18C18.2761 19.5 18.5 19.2761 18.5 19V9.5ZM11 11H13V13H11V11ZM7 11V13H9V11H7ZM15 13V11H17V13H15Z" fill="#1E1E1E"/>
</svg>

Because Gutenberg manage the style of this icon by using the svg fill attribute, it applies it to the svg <path> tag which isn't the same thing as applying to a svg <rect> tag if I understood correclty.
See https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/block-icon/style.scss#L8-L12

So I'm going to propose a pull request.

[critterverse]

Good to know! My mistake for making the original icon too complex and I'm happy to hear the revised version is working better 😁