Vue3/Vite auto importing icon names with sequential dashed numbers results in mangled filename

[bbugh]

Vue3/Vite auto importing icon names with sequential dashed numbers results in mangled filename

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vue3-script-setup-with-vite-fasbhc (Open reproduction)

[userquin]

it seems another problem, we're using camelToKebab and the resolver should be fine:

[bbugh]

Hey @userquin. Your example shows you accidentally passing kebab case in to camelToKebab. If you pass the actual camel case in, you can see the issue reproduced.

I don't believe the problem is the conversion back from camel case, it's the conversion from kebab case to camel case. It is losing precision in the conversion process because camelCase doesn't have a separator that can delimit sequential numbers.

[olemarius]

I just upgraded from 0.16.5 to 1.17.1 and got errors for any icons containing : such as

<icon-heroicons-outline:terminal

[unplugin-icons] Could not load ~icons/heroicons/terminal (imported by src/components/mycomponent.vue?vue&type=script&setup=true&lang.ts): Icon heroicons/terminal not found
@bloc/frontend:preview: error during build:

[userquin]

@olemarius can you fork this SB repro https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/userquin/docs-add-stackblitz-links/examples/vite-vue3 and add a reproduction?

EDIT: I guess we also need to fix the compiler.

[olemarius]

@olemarius can you fork this SB repro https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/userquin/docs-add-stackblitz-links/examples/vite-vue3 and add a reproduction?

EDIT: I guess we also need to fix the compiler.

Thanks, managed to track down what caused it. Seems to be the componentPrefix: 'icon', option here:

https://stackblitz.com/edit/unplugin-unplugin-icons-8kzqtn?file=vite.config.ts

[userquin]

@olemarius you've installed heroicons, install heroicons-outline instead

or use icon-heroicons:command-line:

In the meantime, import the icon manually: https://stackblitz.com/edit/unplugin-unplugin-icons-g3be2f?file=App.vue

[userquin]

it seems a problem with unplugin-vue-components and/or unplugin-auto-import

[olemarius]

Yea I can always apply a refactor/workaround to fix the problem, but it's a huge project where we use a lot of different icons and they've worked fine before. So I wouldn't expect regressions from upgrading unplugin-icons. To me it seems like the rewrite of : to - is somehow not playing nicely when the componentPrefix option is used.

[userquin]

@olemarius I'll try to fix the problem, or add an option to enable old : behavior if cannot be fixed here

[bbugh]

I'm confused about this thread as it doesn't seem like the conversation happening now is related at all to the original issue I reported above.

[userquin]

@bbugh upps, you're right, checking your use case... I'll remove this issue from the PR

[userquin]

@bbugh it seems a problem with unplugin-vue-components/unplugin-auto-import, adding this importPathTransform hook to the Components plugin works:

    Components({
      dts: true,
      importPathTransform(path) {
        return path === '~icons/fluent/speaker224-regular' ? '~icons/fluent/speaker2-24-regular' : path
      },
      resolvers: [
        IconsResolver({
          alias: {
            park: 'icon-park',
          },
          customCollections: ['custom', 'inline'],
        }),
      ],
    }),

[bbugh]

Ahhh, thanks for the workaround! That's helpful.

[firmianaQ]

<icon-mingcute-calendar-2-line/>
Icon `mingcute/calendar2-line` not found