Optimize SVG assets and update builder interface

[joshblack]

Closes #5568

This PR adds in the ability to optimize SVG assets in the output package directory, alongside including QOL fixes for our builder packages.

This PR also adds in tests for the icons-vue package since we ended up needing to update the builder with the new metadata format. A big source of the LOC changes comes from the snapshots generating its public API.

Changelog

New

• e2e/icons-vue
  • Add PublicAPI tests for icons-vue
• Add official vue builder to icon-build-helpers
• Add svg builder for optimizing SVG assets
• Add new output extension, this extension does the following:
  • Optimizes asset sources
  • Transform asset source to JS descriptor
  • Provides module name

Changed

• svg assets now live in src/svg instead of svg
• icon-build-helpers
  • Metadata now takes in an updated input option for SVG and extension directories
    • Update e2e tests to use new syntax for input
    • Update sketch task to use new syntax
  • Builders are now simplified with a new metadata structure
    • react builder has been updated
    • vanilla builder has been updated
  • Bugfix for metadata extensions where it was called with an empty object instead of letting default options be applied
• Update all icon/pictogram tasks with new metadata syntax

Removed

• Un-used files from icon-build-helpers package
• Remove old entrypoint test for icons-vue
• Remove unused icons-vue task files

Testing / Reviewing

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 17c1775

https://deploy-preview-5937--carbon-components-react.netlify.app

[joshblack]

@laurenmrice just a heads up for changes, this is moving the SVG files from svg to src/svg 👀

[netlify]

Deploy preview for carbon-elements failed.

Built with commit 91b54bd

https://app.netlify.com/sites/carbon-elements/deploys/5ea335925086230007c15e36

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 17c1775

https://deploy-preview-5937--carbon-elements.netlify.app

[joshblack]

FYI @davidicus this is our PR which updates the entrypoints for the @carbon/icons-react package 👀

Instead of the flat entrypoint it should now re-export so the sideEffects flag works as intended.

Let me know if you want to pair up and try it out in a product or on the IoT library 👀

[emyarod]

looks good to me

[joshblack]

@asudoh let me know if there is anything else I can do / write-up to help with reviews!

[asudoh]

Some quick findings:

• Seems that @carbon/icons/{es,lib}/{{iconName}}/index.js is gone - Is it intentional? If so, do we need a backward-compatibility layer?
• Seems that @carbon/icons/svg/* is moved to another directory, though svg is in the files list of @carbon/icons package. Is it intentional?

[joshblack]

Hey @asudoh! 👋

Seems that @carbon/icons/{es,lib}/{{iconName}}/index.js is gone - Is it intentional?

I don't believe index.js files are in @carbon/icons presently IIRC 🤔 was trying to go back a couple of versions but can't seem to find index.js per-icon

Seems that @carbon/icons/svg/* is moved to another directory, though svg is in the files list of @carbon/icons package. Is it intentional?

Yeah! Source files are moved over into src/svg but now there will be an optimized svg folder at /svg for folks to use 👀

[asudoh]

I don't believe index.js files are in @carbon/icons presently IIRC 🤔 was trying to go back a couple of versions but can't seem to find index.js per-icon

Just in case it was not clear enough, I was referring to: https://unpkg.com/browse/@carbon/icons@10.10.2/es/chevron--down/index.js

Yeah! Source files are moved over into src/svg but now there will be an optimized svg folder at /svg for folks to use 👀

Sounds good, thank you for clarifying.

[joshblack]

@asudoh nice! Got it, thanks for clarifying 🙏 Will make sure to update glyph.js -> index.js 👀

[joshblack]

Should be updated now!