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

[bbugh]

Describe the bug

After looking at the code for a while, I'm fairly certain it's caused by one of the name resolvers converting the component name into camel case and then at some point the name is converted back to kebab.

I dug through the code for a while see where this is happening and I couldn't find the source; everywhere I looked it was already converted to camel case.

---

For example, when importing

<i-fluent-speaker-2-24-regular />

An error is thrown:

Icon `fluent/speaker224-regular` not found

This should be fluent/speaker-2-24-regular.

---

Importing via direct import works fine:

<script setup>
import FluentSpeaker224Regular from 'virtual:icons/fluent/speaker-2-24-regular'
</script>

<template>
  <FluentSpeaker224Regular />
</template>

Reproduction

https://stackblitz.com/edit/vue3-script-setup-with-vite-fasbhc?file=src%2FApp.vue,vite.config.js

System Info

sh: envinfo: command not found

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[bolt-new-by-stackblitz[bot]]

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