Open theetrain opened 1 year ago
rem
makes sense.
I want to add context that carbon-icons-svelte
used to be a direct dependency until it was purposefully removed two years ago. https://github.com/carbon-design-system/carbon-components-svelte/issues/884
I'm not sure if it's still an issue, but before, the download time of carbon-components-svelte
was quite slow due to the thousands of files from the icons package. The reasoning was that the core components only use a small subset of the full icon set, and consumers can always install the package separately.
Maybe how we package icons as a whole could be redone (#1561).
I see that the official Carbon icon package is apologetically large: https://github.com/carbon-design-system/carbon/issues/6602. It makes sense to include copies of the few SVGs used by the provided components without adding @carbon/icons
as a dependency. I'm sure as-needed patches can be straightforward and rare.
Looking at packaging options, I looked into unplugin-icons for Iconify. I see the full Carbon icon set is provided by Iconify and there's a Svelte implementation: https://icon-sets.iconify.design/carbon/4k/. Perhaps consumers of carbon-components-svelte
can have the privilege of choice; they may:
carbon-icons-svelte
featuring the full Carbon icon set in node_modulesunplugin-icons
, giving you options to use Iconify-hosted icons or have Vite process them and be bundled in shipped code via the ?raw
suffixFolks with certain enterprise restrictions should be able to determine which would work best for them, and we can help document the pros and cons of each option.
With that said, this ticket can focus on utilizing rem
units and we can track the icon packaging decision here or elsewhere.
Currently, our set of interaction icons have their dimensions defined by SVG attributes
width
andheight
that render as pixel units. This does not scale up when adjustinghtml { font-size: 100% }
in the browser to different percentages.I propose the following:
/src/icons
and consume fromcarbon-icons-svelte
rem
units corresponding towidth
andheight
Renders as:
This is achievable since all icons appear to be one-tone and inherit from the page's font color. There are caching benefits to serving SVG files statically, though I'm unsure if this will cause inflexibility for users, and perhaps it needs to be an opt-in setting; this may deserve an RFC.