Resolves #38850 - Add Icons package build process

[tbradsha]

What?

Currently a draft. See #38850 for the end goal.

In its final configuration, one can add an icon SVG to the package's ./svg folder, and it will build the needed React/JS files.

Currently if one adds SVGs to said folder, they can run ./tools/clean-svgs.js to clean SVG files in place, or ./tools/svg-to-react.js to generate "source" React files.

There are a few hiccups I'll need to work out:

• Gutenberg doesn't allow raw <svg> or <path> tags, and instead forces use of its own <SVG> and <Path> React primitives. Given the simplicity of these SVGs, I currently just replace the tag names, but I'll need to see if this has further implications.
• The Storybook component references some contents of the src folder, which largely won't exist anymore. I'm not sure the best way to handle this; in its current state it causes linting errors that I've suppressed.
• Packages are currently set up to expect a src folder, and from there they build build, build-module and build-types. Again, given that much of the src folder will be dynamically generated, I'm not sure the best way to handle this. Some ideas:
  1. Inject a pre-build step that runs scripts to generate the ./src/library dir and ./src.index.js file from the SVGs, followed by the normal build, and finally a cleanup/post-build script to remove those generated "source" files. Given the infrequency of icon changes, it seems a bit much to me.
  2. Keep the ./src files committed as they have been historically, and allow a manually-run script to regenerate those files on demand (basically what I've got committed in this PR).

Note that I currently use src as the generated file destination for legacy reasons, but this will likely need to change.

Will think on this more, but pushing the PR in the meantime.

@jasmussen if you want to take a look.

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @tbradsha! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[jasmussen]

Nice, thanks so much for working on this. It will be a huge boon to have a build step:

• The icons will presumably be much more available to use in other projects, whether through using individual minified SVGs, or potentially adding sprites, icon fonts, or other formats if need be, a build step should be able to handle that.
• Ideally the process can be much less prone to error as well, we have in the past sometimes forgotten to remove hex colors applied to the icons.

It will likely require some Figma renaming and cleanup so the names match, and we can do a batch "select all/export" for when we add new icons using this process. That's a task I'm happy to dive into, and CC: @WordPress/gutenberg-design for awareness.

What's a good next step here? @mirka can you take a look? Thank you both!

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: First-time Contributor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[tbradsha]

Self-closing as stale/outdated. For future ideas, feel free to take a look at this repo:

https://github.com/Automattic/jetpack/tree/trunk/projects/js-packages/social-logos

[jasmussen]

Thanks for the effort, bummer this didn't come to pass. I'll copy over your message to the main issue!