Add size prop to icon packages

[joshblack]

We currently have ~1,250 icons in our icon packages. Since our system supports 4 sizes, this ends up with ~5,000 modules (1250 icons * 4 sizes each). Add in a default entry point for each icon and its size, and that becomes ~6250 files that get shipped in a package.

Historically, we've had to invest some time to fix infrastructure issues that have come from trying to satisfy packages that can grow to this size. In addition, it is easy for these packages to deopt and cause consumers to ship megabytes more code than they intend to when using this module.

Moving forward, we are moving from our "component per icon/size" strategy to a "icon with size prop" approach. While this could increase the size of individual icons that support multiple sizes, this would decrease the overall file size of each package and would allow better code re-use for icons that are downsized from 32x32 (which are the majority)

Packages impacted

• @carbon/icons
• @carbon/icons-react
• @carbon/icons-angular
• @carbon/icons-vue

Checklist

• Add a new builder called react-next to the react builder and include it in icons-react
  • This builder should no longer emit icon components with the size in the name
  • It should instead emit components that support a size prop
    • If a component has a bespoke SVG at a specific size, the component should use that SVG when that size is specified
  • This builder should emit files at the top-level as CommonJS exports
    • Namespaced modules may follow the namespace folder path and then follow the above rule
• Add support for passing through deprecation message with new setup
• Figure out flow for module names that are awkwardly generated in React
• Add a new builder called vanilla-next to the builders and include it in icons
  • It should follow the new icon rules specified above
• Add a new builder called vue-next to the builders and include it in icons-vue
  • It should follow the new icon rules specified above
• Update carbon-components-react icon usage to use this new size approach
  • Use this work item as an opportunity to write a codemod
• Update existing builders to emit a deprecation notice that points users to new approach

[metonym]

Sounds like a great plan. Will the metadata.json file still be shipped?

[joshblack]

Hey @metonym! 👋

Yes, definitely. We might end up doing a dedicated @carbon/icons-metadata package too to help with some of the generated size problems but we'll definitely makes sure this is available 👍

[metonym]

Awesome – thank you Josh

[dkahlau]

Will there ever be a vue-next implementation?

[joshblack]

Hi @veganD! 👋 At the moment there isn't a plan to add support but it's definitely something that we want to do. Unfortunately, it came down to time and what the team is able to maintain with our focus on React and the styles. We're super open to contributions for this or working with folks who would like to add in support for it!