IconResolver not working with custom icons

RuBaWa commented 1 year ago

Describe the bug

IconsResolver don't find svg icons for global use. Manual import with "import MyIcon from '~icons/myName/my-icon';" is working.

This is my vite.config.ts:

// https://github.com/antfu/unplugin-icons
Icons({
  compiler: 'vue3',
  customCollections: {
    myName: FileSystemIconLoader('src/assets/icons'),
  },
}),

// https://github.com/antfu/unplugin-vue-components
Components({
  deep: true,
  dts: './src/components.d.ts',
  directoryAsNamespace: true,
  resolvers: [
    IconsResolver({
      customCollections: ['myName'],
    }),
  ],
}),

Reproduction

I tried it with "vite + vue3" example from this repo, it only works with default config. If i change customCollections name from "custom" to another name, this items are not listet anymore.

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 13.95 GB / 31.72 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 106.0.5249.119
    Edge: Spartan (44.19041.1266.0), Chromium (106.0.1370.47)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

yarn

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.

KuhlTime commented 1 year ago

Hi @RuBaWa maybe check the following:

Whether you included your components.d.ts file inside yourtsconfig.json:
```
{
"include": ["src/**/*.d.ts"]
}
```

Whether you used the right element syntax

<template>
<i-myName-iconName>
</template>

RuBaWa commented 1 year ago

You are rigtht, its working with:

<template>
    <i-myName-iconName>
</template>

I was confused, because this custom icons are not updated in components.d.ts dts file, where all other components are listet. In demo project for vite + vue3 they also listet in this file. But after some tests it is working fine without beeing listet in this file.

KuhlTime commented 1 year ago

Perfect. Glad I could help @RuBaWa ;)

I think this issue can be closed then.

unplugin / unplugin-icons