HMR not working

[ngekoding]

I use Vite and when trying to change some attributes for the icon, the page must be reloaded to get the changes.

Here is the example:

<span class="iconify text-red-400" data-icon="mdi:home" />

And when trying to change the color, e.g. change it to text-green-400, or change the icon with fa:home, this changes only applied after reloading the page.

I was also try unplugin-icons, and it's working well with HMR. But I need to use the span tag also.

Here is my vite.config.js plugins options:

import PurgeIcons from 'vite-plugin-purge-icons'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

// ...

plugins: [
  // ...
  Components({
    resolvers: IconsResolver({
      prefix: 'TwIcon'
    }),
  }),
  Icons({
    compiler: 'vue3'
  }),
  PurgeIcons(),
],

Thanks in advance.