Find a nicer way to bundle shoelace icons

[spwoodcock]

Describe the bug

• We need to bundle the shoelace icons manually upstream if using hotosm/ui.
• This is possible when using a bundler with e.g. a Vite plugin, but not ideal when needing to use the components directly in HTML.
• If we load the components from the official CDN, then the paths are set correctly to read the icons.
• But if we load from our custom components.js bundle this doesn't work. The icons are there, but the setBasePath method is not called to load from our package.

Possible solutions

Option 1: Could we import the setBasePath method:

import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';

And then re-export it from the hotosm/ui package, to prevent having to install shoelace directly?

Option 2: Bundle the icons another way somehow.

Additional context Add any other context about the problem here.

[spwoodcock]

For the CDN usage https://cdn.jsdelivr.net/npm/@hotosm/ui@latest/dist/components.js I have made use of setBasePath to use the bundled CDN icons https://cdn.jsdelivr.net/npm/@hotosm/ui@latest/dist/assets/icons/xxx.svg, so this should work without configuration when importing in HTML / Markdown etc.

When using the library with a bundler (i.e. developing an app with a framework), the icon assets must be copied manually into the final bundle. Info in the readme/docs.

[spwoodcock]

Update: I hardcoded the icons we use in the library in a .ts file and registered as an extra icon pack with shoelace sl-icon. To use we need to: <sl-icon library="bundled" icon="icon-name"></sl-icon>

Add new icons to theme/icons/bundled.ts to use.

This is the same way that shoelace bundles some essential system icons.