Use rem units for Icons

[theetrain]

Currently, our set of interaction icons have their dimensions defined by SVG attributes width and height that render as pixel units. This does not scale up when adjusting html { font-size: 100% } in the browser to different percentages.

I propose the following:

• remove icons from /src/icons and consume from carbon-icons-svelte
• refactor icons to have defined rem units corresponding to width and height
• (optional consideration) refactor icons to build as static SVG assets. Example:

  <CheckmarkFilled />

  Renders as:

  <img src="/icons/checkmarkfilled.svg" alt="checkmark filled" />

  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.

[metonym]

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. #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).

[theetrain]

I see that the official Carbon icon package is apologetically large: carbon-design-system/carbon#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:

1. Consume the forthcoming carbon-icons-svelte featuring the full Carbon icon set in node_modules
2. Use unplugin-icons, giving you options to use Iconify-hosted icons or have Vite process them and be bundled in shipped code via the ?raw suffix
3. Use Iconify's Svelte implementation to use their CDN-hosted icons that includes the Carbon icon set

Folks 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.