auto-import confused with mdi and mdi-light collection

[mathaimon]

Describe the bug

The auto import fails to import the light-flood-down icon from the mdi collection. the auto import tries to import the icon from the mdi-light collection rather than the mdi collection. importing the icon manually works as expected. I'm using vue3.

Reproduction

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 7.78 GB / 19.82 GB
  Binaries:
    Node: 19.6.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.4.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.9.2 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (117.0.2045.47)
    Internet Explorer: 11.0.22621.1

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.

[antfu]

In that case you could use mdi:light-flood-down instead of mdi-light-flood-down

[mathaimon]

still gives the same error

[mathaimon]

any fix.?

[userquin]

@mathaimon

Try importing it: https://stackblitz.com/edit/unplugin-unplugin-icons-carphv?file=package.json,App.vue

There is a collision between names with this icon https://github.com/unplugin/unplugin-icons/blob/main/src/resolver.ts#L70-L85

[userquin]

I'll try to fix the collision, camelToKebab replacing : with -: https://github.com/iconify/iconify/blob/main/packages/utils/src/misc/strings.ts#L19C17-L19C29

[userquin]

@mathaimon the issue will be closed when linked PR merged... Once published new version you can use: <i-mdi:light-flood-down />.

Check the https://github.com/unplugin/unplugin-icons/pull/316/files#diff-c629337971b0f150f659853a3e63126162d379a734775a7b8e4a7fef6b795978R16

[userquin]

@mathaimon released v0.17.1