Optimize SVG icon with 20 size viewBox to size 24

[t-hamano]

What problem does this address?

All icons in the @wordpress/icons package are based on a 24-size viewBox. However, some hard-coded icons exist that have a 20-size viewBox.

Below is a list of hard-coded icons with size 20, with the exception of the tests.

• packages/block-editor/src/components/block-list/subdirectory-icon.js
• packages/block-editor/src/components/color-style-selector/index.js
• packages/block-editor/src/components/ungroup-button/icon.js - [RNMobile] Update icon for UngroupButton component #50969
• packages/block-library/src/heading/heading-level-icon.js - Heading Block: Remove unused HeadingLevelIcon component #52008
• packages/block-library/src/site-title/edit/level-icon.js - Move HeadinglevelDropdown to its own component #46003

What is your proposed solution?

My understanding is that if the height and width of the viewBox match, the drawing area is a square, so it makes no difference whether the size is 20 or 24. However, I am concerned that the values of the width/height and viewBox attributes do not match when the SVG is displayed at 24px size for an icon created based on a 20-size viewBox.

An example is the block toolbar icon for the heading block:

I am not familiar with the design rules for icons in the Gutenberg project, but I am wondering if it would be a good idea to unify these icons at size 24.

[jasmussen]

Thanks for the issue, this is an excellent bit of code quality we need to get in front of. The answer is simple: every single icon in the icon library should be 24x24 and with a 24x24 viewbox to match. If something doesn't match those metrics, it's either erroneous or not an icon (i.e. there could be edge cases where a particular component needs an SVG element for some functional piece, but then it shouldn't be in the icon library).

Unfortunately there's still some catching up to do as far as consistency between the Figma icon library and what's shipping. Both in terms of icons missing and their naming, but also some older icons that need updating to the new style. #38850 is a key challenge that would be good to solve in terms of moving that forward.

[t-hamano]

@jasmussen
Thanks for the advice.

I have learned that there are already heading icons for all levels in the Figuma icon library:

What do you think about shipping these icons to @wordpress/icons? The heading icons are used in the Heading block and the Site Title block, each with hard-coded SVG.

In the future, they may also be available in a toggle group control that selects the heading level in the global styles:

[jasmussen]

It seems a mistake we haven't done that, let's definitely do so. I can help with the SVGs next week, I've a bit on my table today.

[jasmussen]

Here are the icons:

Heading 1:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 24 24" viewBox="0 0 24 24"><path d="M17.6 7c-.6.9-1.5 1.7-2.6 2v1h2v7h2V7h-1.4zM11 11H7V7H5v10h2v-4h4v4h2V7h-2v4z" style="fill:#1e1e1e"/></svg>

2:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 24 24" viewBox="0 0 24 24"><path d="M9 11.1H5v-4H3v10h2v-4h4v4h2v-10H9v4zm8 4c.5-.4.6-.6 1.1-1.1.4-.4.8-.8 1.2-1.3.3-.4.6-.8.9-1.3.2-.4.3-.8.3-1.3 0-.4-.1-.9-.3-1.3-.2-.4-.4-.7-.8-1-.3-.3-.7-.5-1.2-.6-.5-.2-1-.2-1.5-.2-.4 0-.7 0-1.1.1-.3.1-.7.2-1 .3-.3.1-.6.3-.9.5-.3.2-.6.4-.8.7l1.2 1.2c.3-.3.6-.5 1-.7.4-.2.7-.3 1.2-.3s.9.1 1.3.4c.3.3.5.7.5 1.1 0 .4-.1.8-.4 1.1-.3.5-.6.9-1 1.2-.4.4-1 .9-1.6 1.4-.6.5-1.4 1.1-2.2 1.6v1.5h8v-2H17z" style="fill:#1e1e1e"/></svg>

3:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 24 24" viewBox="0 0 24 24"><path d="M9 11H5V7H3v10h2v-4h4v4h2V7H9v4zm11.3 1.7c-.4-.4-1-.7-1.6-.8v-.1c.6-.2 1.1-.5 1.5-.9.3-.4.5-.8.5-1.3 0-.4-.1-.8-.3-1.1-.2-.3-.5-.6-.8-.8-.4-.2-.8-.4-1.2-.5-.6-.1-1.1-.2-1.6-.2-.6 0-1.3.1-1.8.3s-1.1.5-1.6.9l1.2 1.4c.4-.2.7-.4 1.1-.6.3-.2.7-.3 1.1-.3.4 0 .8.1 1.1.3.3.2.4.5.4.8 0 .4-.2.7-.6.9-.7.3-1.5.5-2.2.4v1.6c.5 0 1 0 1.5.1.3.1.7.2 1 .3.2.1.4.2.5.4s.1.4.1.6c0 .3-.2.7-.5.8-.4.2-.9.3-1.4.3s-1-.1-1.4-.3c-.4-.2-.8-.4-1.2-.7L13 15.6c.5.4 1 .8 1.6 1 .7.3 1.5.4 2.3.4.6 0 1.1-.1 1.6-.2.4-.1.9-.2 1.3-.5.4-.2.7-.5.9-.9.2-.4.3-.8.3-1.2 0-.6-.3-1.1-.7-1.5z" style="fill:#1e1e1e"/></svg>

4:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 24 24" viewBox="0 0 24 24"><path d="M20 13V7h-3l-4 6v2h5v2h2v-2h1v-2h-1zm-2 0h-2.8L18 9v4zm-9-2H5V7H3v10h2v-4h4v4h2V7H9v4z" style="fill:#1e1e1e"/></svg>

5:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 24 24" viewBox="0 0 24 24"><path d="M9 11H5V7H3v10h2v-4h4v4h2V7H9v4zm11.7 1.2c-.2-.3-.5-.7-.8-.9-.3-.3-.7-.5-1.1-.6-.5-.1-.9-.2-1.4-.2-.2 0-.5.1-.7.1-.2.1-.5.1-.7.2l.1-1.9h4.3V7H14l-.3 5 1 .6.5-.2.4-.1c.1-.1.3-.1.4-.1h.5c.5 0 1 .1 1.4.4.4.2.6.7.6 1.1 0 .4-.2.8-.6 1.1-.4.3-.9.4-1.4.4-.4 0-.9-.1-1.3-.3-.4-.2-.7-.4-1.1-.7 0 0-1.1 1.4-1 1.5.5.4 1 .8 1.6 1 .7.3 1.5.4 2.3.4.5 0 1-.1 1.5-.3s.9-.4 1.3-.7c.4-.3.7-.7.9-1.1s.3-.9.3-1.4-.1-1-.3-1.4z" style="fill:#1e1e1e"/></svg>

6:

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 24 24" viewBox="0 0 24 24"><path d="M20.7 12.4c-.2-.3-.4-.6-.7-.9s-.6-.5-1-.6c-.4-.2-.8-.2-1.2-.2-.5 0-.9.1-1.3.3s-.8.5-1.2.8c0-.5 0-.9.2-1.4l.6-.9c.2-.2.5-.4.8-.5.6-.2 1.3-.2 1.9 0 .3.1.6.3.8.5 0 0 1.3-1.3 1.3-1.4-.4-.3-.9-.6-1.4-.8-.6-.2-1.3-.3-2-.3-.6 0-1.1.1-1.7.4-.5.2-1 .5-1.4.9-.4.4-.8 1-1 1.6-.3.7-.4 1.5-.4 2.3s.1 1.5.3 2.1c.2.6.6 1.1 1 1.5.4.4.9.7 1.4.9 1 .3 2 .3 3 0 .4-.1.8-.3 1.2-.6.3-.3.6-.6.8-1 .2-.5.3-.9.3-1.4s-.1-.9-.3-1.3zm-2 2.1c-.1.2-.3.4-.4.5-.1.1-.3.2-.5.2-.2.1-.4.1-.6.1-.2.1-.5 0-.7-.1-.2 0-.3-.2-.5-.3-.1-.2-.3-.4-.4-.6-.2-.3-.3-.7-.3-1 .3-.3.6-.5 1-.7.3-.1.7-.2 1-.2.4 0 .8.1 1.1.3.3.3.4.7.4 1.1 0 .2 0 .5-.1.7zM9 11H5V7H3v10h2v-4h4v4h2V7H9v4z" style="fill:#1e1e1e"/></svg>

Hope that helps!

[t-hamano]

@jasmussen Thank you so much! I would like to submit a PR as soon as possible.

[t-hamano]

Some hard-coded icons discussed in this issue have been replaced with icons from the icons package. The remaining two icons with viewports of size 20 are:

Subdirectory

packages/block-editor/src/components/block-list/subdirectory-icon.js

This icon is used only in the mobile app. On the left side, there is an icon with the top, bottom, left and right sides reversed, which might be able to divert.

ColorSelectorSVGIcon

packages/block-editor/src/components/color-style-selector/index.js

This icon is part of a child of the BlockColorsStyleSelector component, which has already been deprecated and can be removed in the future.

[jasmussen]

For the sub-directory icon, it looks like that's meant to be a bit of a breadcrumb? In that light, I would simplify that drastically, I don't think we need such a verbose icon in between parent and child blocks. We may even be able to use a simple · (·) which we use for top toolbar and in the future, for embedded:

[t-hamano]

For the sub-directory icon, it looks like that's meant to be a bit of a breadcrumb?

I think so too. In the following image, the paragraph block in the group block is selected, and the icon to the left of the subdirectory-icon seems to indicate the parent block.

Furthermore, this icon is just an icon and does not appear to have any click events.

We may even be able to use a simple · (·) which we use for top toolbar and in the future, for embedded:

This is a great idea! I have yet to run a native Gutenberg app in development mode, but I would like to give it a try.