Try: G2-inspired iconography #20464
Try: G2-inspired iconography #20464
Conversation
jasmussen
requested review from
ajitbohra,
chrisvanpatten,
daniloercoli,
ellatrix,
etoledom,
jorgefilipecosta,
SergioEstevao,
Soean,
talldan and
youknowriad
as code owners
|
Size Change: -1.74 kB (0%) Total Size: 863 kB
ℹ️ View Unchanged
|
jasmussen
force-pushed
the
try/g2-iconography
branch
from
2baaca9
to
aee74cd
Compare
|
I'm slightly pausing adding additional icons, both to let feedback be addressed in the Figma file, but also to look at improving the pipeline slightly. Currently the icons are sourced in Figma, and Figma has a good SVG exporter that makes batch exporting easy. But many of the icons are drawn using strokes instead of fills, and these strokes need to become fills in order to work properly as icons in the editor. https://github.com/elrumordelaluz/outline-stroke looks like it can help automate the conversion of strokes to fills. Combined with svgmin, the pipeline can be automated entirely. |
|
The inserter icon doesn't work well if the button is not bordered or with a background. Maybe it's time to add back to the isPrimary or isSecondary variation for the appender and inbetween-inserter. Also the ButtonAppender is still using the old icon. |
|
I don't know if it's just a visual impression but the main inserter feels off-centered for me. |
Oh that's right, I meant to mention that. This is something we'll have to solve, and I have a few ideas. |
Good catch, I believe that should be fixed now. |
|
I'm sad to note that the
So instead I'll be looking at other ways to streamline in the near future. |
jasmussen
force-pushed
the
try/g2-iconography
branch
from
862ef39
to
4c4359d
Compare
|
Fixed this one, which has annoyed me for a while:
|
|
Chevron icon for more inline tools:
|
|
Retired the dropdown mixin, which also meant removing it from here:
Better, even though it can become better still:
|
|
Polished the sibling inserter. Before:
It was inspired by this:
After:
I also added an animation-only delay:
|
|
Polished the appenders used in Buttons, Social Links, Navigation:
|
packages/block-editor/src/components/block-navigation/style.scss
Outdated
Show resolved
Hide resolved
| <Path fill="none" d="M0 0h24v24H0V0z" /> | ||
| <Path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z" /> | ||
| <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | ||
| <Path d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z" /> | ||
| </SVG> |
There was a problem hiding this comment.
Should we move these to the icons package?
| viewBox="0 0 24 24" | ||
| > | ||
| <Path d="M6.5 1v21.5l6-6.5H21L6.5 1zm5.1 13l-3.1 3.4V5.9l7.8 8.1h-4.7z" /> | ||
| <Path d="M9.4 20.5L5.2 3.8l14.6 9-2 .3c-.2 0-.4.1-.7.1-.9.2-1.6.3-2.2.5-.8.3-1.4.5-1.8.8-.4.3-.8.8-1.3 1.5-.4.5-.8 1.2-1.2 2l-.3.6-.9 1.9zM7.6 7.1l2.4 9.3c.2-.4.5-.8.7-1.1.6-.8 1.1-1.4 1.6-1.8.5-.4 1.3-.8 2.2-1.1l1.2-.3-8.1-5z" /> | ||
| </SVG> | ||
| ); |
There was a problem hiding this comment.
Do we want to move these into the icons package?
| </SVG> | ||
| ); | ||
| export const embedVideoIcon = ( | ||
| <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | ||
| <Path d="M0,0h24v24H0V0z" fill="none" /> | ||
| <Path d="m10 8v8l5-4-5-4zm9-5h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2zm0 16h-14v-14h14v14z" /> | ||
| <Path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V9.8l4.7-5.3H19c.3 0 .5.2.5.5v14zM10 15l5-3-5-3v6z" /> |
There was a problem hiding this comment.
What about moving these to the icons package?
| <Rect x="7" y="11" width="2" height="2" /> | ||
| <Rect x="7" y="15" width="2" height="2" /> | ||
| <Path d="M20.1,3H3.9C3.4,3,3,3.4,3,3.9v16.2C3,20.5,3.4,21,3.9,21h16.2c0.4,0,0.9-0.5,0.9-0.9V3.9C21,3.4,20.5,3,20.1,3z M19,19H5V5h14V19z" /> | ||
| <Path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v12zM7 11h2V9H7v2zm0 4h2v-2H7v2zm3-4h7V9h-7v2zm0 4h7v-2h-7v2z" /> |
There was a problem hiding this comment.
Same, I thought I already moved this to the icons package? I believe this file is not used at all and should be removed.
| @@ -5,8 +5,7 @@ import { Path, SVG } from '@wordpress/components'; | |||
|
|
|||
| export const ToolbarSubmenuIcon = () => ( | |||
| <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24"> | |||
| <Path d="M14 5h8v2h-8zm0 5.5h8v2h-8zm0 5.5h8v2h-8zM2 11.5C2 15.08 4.92 18 8.5 18H9v2l3-3-3-3v2h-.5C6.02 16 4 13.98 4 11.5S6.02 7 8.5 7H12V5H8.5C4.92 5 2 7.92 2 11.5z" /> | |||
| <Path fill="none" d="M0 0h24v24H0z" /> | |||
| <Path d="M2 12c0 3.6 2.4 5.5 6 5.5h.5V19l3-2.5-3-2.5v2H8c-2.5 0-4.5-1.5-4.5-4s2-4.5 4.5-4.5h3.5V6H8c-3.6 0-6 2.4-6 6zm19.5-1h-8v1.5h8V11zm0 5h-8v1.5h8V16zm0-10h-8v1.5h8V6z" /> | |||
There was a problem hiding this comment.
Should we move this to the icons package.
| > | ||
| <Path d="M5 5H3v2h2V5zm3 8h11v-2H8v2zm9-8H6v2h11V5zM7 11H5v2h2v-2zm0 8h2v-2H7v2zm3-2v2h11v-2H10z" /> | ||
| <Path d="M13.8 5.2H3v1.5h10.8V5.2zm-3.6 12v1.5H21v-1.5H10.2zm7.2-6H6.6v1.5h10.8v-1.5z" /> |
| SVG, | ||
| } from '@wordpress/components'; | ||
| import { useSelect, useDispatch } from '@wordpress/data'; | ||
| import { PostPreviewButton } from '@wordpress/editor'; | ||
| import { __, _x } from '@wordpress/i18n'; | ||
| import { external } from '@wordpress/icons'; | ||
| import { external, check } from '@wordpress/icons'; | ||
|
|
||
| const downArrow = ( |
There was a problem hiding this comment.
Isn't this already on the icons package?
|
You're a treasure, Riad. I don't know how you manage to review so thoroughly, and create new PRs at the same time. Thank you. |
|
Looking real good. Very nice work. |
|
Riad you speedy speedy man! One note before you merge, though — I noticed that the checkbox form control is now looking a bit strained, I'd like to see what I can do with it before merge.
|
|
Polished checkboxes. Small screens:
Big screens:
|
|
🎉 Really well done! Thanks for tying together all the things! |
|
Would it be possible to add the color-picker dashicon to gutenberg? I started porting from https://github.com/WordPress/dashicons/blob/master/svg-min/color-picker.svg like this: |
closes #20284
This PR explores adding the new icons that are discussed in #20284.
Note that many of these icons are still receiving feedback in the Figma file, and this PR will be updated to address any corrections made.
Screenshots:
This branch is still in progress, as these new icons require a bit more work than just replacing SVG files. For instance, the dropdown indicator for more inline tools is currently drawn with CSS, and should be a chevron instead, and some icons are currently scaled down, so the CSS needs to be tuned.
However as a work in progress, I invite you to try out the current state of the branch. The immediate feeling is that the coherence feels very much elevated, as the icons are balanced towards the same G2 visual, causing a nice relationship between the dark stroke outlines and the reduced icons.