Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolves #38850 - Add Icons package build process #61169

Draft
wants to merge 5 commits into
base: trunk
Choose a base branch
from

Conversation

tbradsha
Copy link

@tbradsha tbradsha commented Apr 26, 2024

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

Copy link

👋 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.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Apr 26, 2024
@jasmussen
Copy link
Contributor

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants