Autoload libraries with dashes fails

[unplugin]

Autoload libraries with dashes fails

[antfu]

Can you provide more context?

[xorik]

Sorry.

So I have a vue/vite app. Everything with latest versions. I search for icons on the website https://icones.js.org/. Then I add prefix i- and replace comma to dash, so I get something like

<i-ic-twotone-directions-bus/>

Put it in template and it perfectly works.

But some icons e.g. mdi-light:alarm or noto-v1:flag-for-flag-japan don't work.

<!--  This doesn't work  -->
<i-noto-v1-flag-for-flag-japan/>

Firefox gives this error in console:

Loading module from “http://localhost:3000/@id/@vite-icons/noto/v1-flag-for-flag-japan” was blocked because of a disallowed MIME type (“text/html”).

Chrome gives this:

App.vue:2 GET http://localhost:3000/@id/@vite-icons/noto/v1-flag-for-flag-japan net::ERR_ABORTED 404 (Not Found)

And after page reload web server doesn't show anything (white page).

I think this is because the noto-v1 contains a dash symbol, so parser gets confused.

So App.vue:

<template>
  <h3>Hello vite</h3>

  <div id="icons">
    <!--  This works  -->
    <i-ic-twotone-directions-bus/>

<!--  This doesn't work  -->
<!--    <i-noto-v1-flag-for-flag-japan/>-->
  </div>
</template>


<style>
#icons > * {
  font-size: 100px;
  padding: 10px;
}
</style>

vite.config.js:

import Vue from '@vitejs/plugin-vue'
import Components from 'vite-plugin-components'
import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'

export default {
  plugins: [
    Vue(),
    Components({
      customComponentResolvers: ViteIconsResolver(),
    }),
    ViteIcons(),
  ],
}

I hope it's clear now.

UPD: demo: https://github.com/xorik/vite-icons-demo just uncomment <i-noto-v1-flag-for-flag-japan/> in App.vue

[antfu]

Ah, I see, it's indeed a bug. Could do that later, or if you would like to give a try, I am happy to see the PR. Thanks!

[xorik]

@antfu I'd like to help, but I have no idea how to debug plugins like that. Any suggestions how to start?

[antfu]

Actually, looks like all we need to do is to update the data source
https://github.com/antfu/vite-plugin-icons/blob/59a8ce431641ea211d654795fb1310771fe3dc18/src/resolver.ts#L36

I will do that now

[xorik]

Thank you for the quick fix!