Feature: Allow dynamic import of icon for easier bundling

[madsrasmussen]

Description

Currently, we import icons based on a relative path. This causes some trouble when bundling the icon-registry module as files might not be located in the same place after bundling. This PR adds the extra option to "manually" import the icon file (the same way we do in manifests) like path: () => import('./path/to/icon.js'). This way the bundler knows where the files are located and will handle them correctly.

What to test

• Make sure that icons render correctly when running with Vite
• Make sure that icons render correctly when building for the CMS.
• All icons are still lazy loaded when they appear on the screen.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

[iOvergaard]

I like the premise of this. Can I ask what the need is to change all icons to .ts files?

[madsrasmussen]

@iOvergaard The only reason was that I started to get type errors with js files. I don't know how we could avoid that before. 🤔

[iOvergaard]

@iOvergaard The only reason was that I started to get type errors with js files. I don't know how we could avoid that before. 🤔

I think it worked because it was just a variable, and we additionally had Vite ignore it on the dev server with:

import(/* @vite-ignore */ iconPath)