Custom icons HMR failure

[1974193036]

When I modify the local svg content or add new svg files, HMR (Hot Module Replacement) does not work and requires restarting the service

[userquin]

Not easy to add this feature: we can use dynamic import, readFile (or even fetch/ofetch) or just some iconify node helpers (ExternalPackageIconLoader, FileSystemIconLoader), just check https://github.com/unplugin/unplugin-icons/blob/main/examples/vite-vue3/vite.config.ts#L28-L39.

For example, using Vite and adding this plugin in the vue3 example here, we get HMR working (updating assets/giftbox.svg SVG):

    {
      apply: 'serve',
      enforce: 'post',
      handleHotUpdate({ server, file }) {
        if (file.endsWith('assets/giftbox.svg')) {
          console.log(server.moduleGraph.fileToModulesMap.keys())
          const module = server.moduleGraph.getModuleById('~icons/inline/async')
          if (module) {
            return [module]
          }
        }
      },
    },

The main issue is about the mapping, we need to invalidate the icon, we don't have the complete scope to do that (? 🤔 => there is no way to know what module to invalidate from the file):