Open jasmussen opened 2 years ago
@tbradsha Since you're interested in working on this, here's what I think could be the success criteria for the minimum viable first iteration:
src/library
.npm run build
builds without errors. Our codebase contains plenty of imports from @wordpress/icons
, so if all that still builds, we can assume we're good.npm run dev
and add a new svg or make a change to an existing svg, that should automatically be reflected in the built package.(In future iterations, we could add more export types, for example so the original svg files can be directly consumed with import { someIcon } from '@wordpress/icons/svg
.)
As for where to start, the entry point of the repo's build process is this build.js file, which then delegates work to build-worker.js
. I think the icon processing will need to happen somewhere in that vicinity.
Is that enough info to get started?
@mirka Thanks! Just to make sure we're on the same page for the initial scope:
src/library
should be generated by the build and should be removed from the repo../svg
) and some tooling scripts (for building SVGs to the React, stored in ./scripts
or ./tools
).npm run dev
and npm run build
would be in this package. In both instances I'd expect it to read the SVGs and generate the interim JS files that go into the ./src/library
folder (as well as generating a new ./src/index.js
file). Can you clarify if they should do something different?
The contents of
src/library
should be generated by the build and should be removed from the repo.I'm a bit unclear what the difference between
npm run dev
andnpm run build
would be in this package. In both instances I'd expect it to read the SVGs and generate the interim JS files that go into the./src/library
folder (as well as generating a new./src/index.js
file). Can you clarify if they should do something different?
Ideally, they are auto-generated into the packages/icons/build*
folders. (Those build folders are already gitignored.) Nothing under src/
should be auto-generated. I'd first attempt to do it with Webpack, for example we'd have a static index.js file like this:
// src/index.js
export someIcon from './library/some-icon.svg';
export anotherIcon from './library/another-icon.svg';
and add some webpack config for the icons package so SVG files are loaded as React components, using something like @svgr/webpack
.
By convention, npm run build
is a build script that builds the package and exits when done. npm run dev
is a build script that continues running until explicitly terminated, during which it watches for src file changes so they can be continuously rebuilt as necessary. I only included it as part of the success criteria because we might need to add some logic to specifically watch for SVG file changes.
- The only contents committed to this package would be SVG files (pre-cleaned, stored in
./svg
) and some tooling scripts (for building SVGs to the React, stored in./scripts
or./tools
).
No strong opinion on where the tooling scripts live. It could either live in bin/packages/
or packages/icons/
, but in any case we can move that easily.
Ideally, they are auto-generated into the
packages/icons/build*
folders.
Great, so skip src
altogether when generating things. I just wanted to make sure, as all the build*
and src
folders were distributed. 👍
I only included it as part of the success criteria because we might need to add some logic to specifically watch for SVG file changes.
Ah, makes sense.
As the project grows, so does the need to simplify the contribution flow for new icons. In that light, we should consider adding a build step to the Icons package. It could work like this:
src
folder of thepackages/icons
becomes a gitignoredbuild
foldersrc
folder should be just a list of raw SVGs exported from the WordPress Design Library Figma.packages/icons/build.js
.For the build script, we can potentially take inspiration from this build process.
There are a few steps that need to be taken to improve the Figma file itself, to enable this flow:
path
.The Figma changes can happen independently of a build step. Here's a zip file containing raw SVG versions of the existing published library, as well as a first draft of a new README file:
icons-package.zip