icon: large CSS is mostly unused

sendlo commented 4 months ago

Description

The CSS coming from the generated less file for icon adds about 45k to our CSS bundle. Most of these icons are not being used, but its a significant chunk of the overall skin bundle. https://github.com/eBay/skin/blob/master/src/less/icon/generated/icon.less

It would be great if there was a way to only include the icons that are being used. Or at least optimize this as much as possible.

Screenshots

No response

Figma link

No response

Engineering pre-requisites

[ ] Successful design review with Design System Team.
[ ] Supports dark mode.
[ ] Supports responsive design.
[ ] Tokens have been provided (or already exist).
[ ] Successful accessibility review with Core A11Y Team.
[ ] Successful frontend review with eBayUI Team.

ianmcburnie commented 4 months ago

Agreed. We really need a solution to this. One option might be to group them by size (16, 20, 24, etc) and type (filter, mail, photo, etc).

patricknelson commented 4 months ago

+1 on this, also on the icons.svg file as well. Or at least have an easier first class supported means by which we can import just the icon SVG files that we want (if not already possible). It's 212k all-in (gzip compressed)!

agliga commented 2 months ago

Duplicate of https://github.com/eBay/skin/issues/2339

eBay / skin