Component auto import doesn't work with custom icons

[Jan-Henrik Damaschke]

I can't get custom icon auto component import to work with unplugin-icons.
I have a folder with svgs and I use the FileSystemIconLoader helper to load the icons.
As soon, as I explicitly import the icons with

import Ghost from '~icons/custom-icons/ghost'

it works, but eventhough I added the following to the Components configuration, it doesn't load the components

    Components({
      dts: true,
      resolvers: [
        IconsResolver({
          customCollections: ['custom-icons'],
        }),
      ],
    }),

Here is a reproduction repo based on vitesse-lite and two fontawesome free icons as example:
https://github.com/itpropro/unplugin-icons-repro

[Jose G. Alfonso]

I have this working with Vue 2 and unplugin-icons fine. Here's my vite.config pertinent sections

import { FileSystemIconLoader } from 'unplugin-icons/loaders';

export default defineConfig({
  plugins: [
    Icons({
      compiler: 'vue2',
      customCollections: {
        // https://github.com/antfu/unplugin-icons#custom-icons
        custom: FileSystemIconLoader('./public/icons', svg => {
          return svg.replace(/^<svg /, '<svg fill="currentColor" ');
        }),
      },
      iconCustomizer(collection, icon, props) {
        // customize all icons in a collection
        if (['icon', 'symbol'].includes(collection)) {
          props.fill = 'currentColor';
        }
      },
    }),
    Components({
      dts: false, // enabled by default if `typescript` is installed
      // relative paths to the directory to search for components.
      dirs: ['src/common/components', 'src/public', 'src/plugins'],
      // valid file extensions for components.
      extensions: ['vue'],
      // search for subdirectories
      deep: true,
      // resolvers for custom components
      resolvers: [
        IconsResolver({
          prefix: false,
          alias: {
            icon: 'custom',
          },
          customCollections: ['symbol', 'custom'],
        }),
      ],
    }),
})

[Jan-Henrik Damaschke]

@Codermar is my reproduction repository working for you? I have not used Vue 2 for over a year and I don't plan to go back ;)
@antfu do you maybe have a second to take a look and my reproduction repo to verify if I misconfigured something or if it's actually a bug?

[Jan-Henrik Damaschke]

This problem still exists, can you maybe help @userquin?

[ccquene]

Actually I also met same issue under vue3.
While using auto import, import will take effect but IconsResolver looks failes.
When I use the test autoInstall feature, it will always try to install my local path and failed with errors.
Looks IconsResolver does not load the local path correctly without any error msg output.

[Jan-Henrik Damaschke]

Did anyone have time to take a look at my reproduction repo? If there is anything missing, I will happily provide that information :)

[Joaquín Sánchez]

@itpropro I'll take a look (unfortunately I haven't had time to update to pnpm 7 yet and I have to do it, so I'll try to check what's wrong)

[Joaquín Sánchez]

@itpropro so, the components.d.ts in your repo should have Footer and the router components once we import the icons on the src/pages/index.vue like this (I'm checking why the UnoCSS icon is not shown)?

EDIT: the UnoCSS icon not shown since you don't have the preset-icons installed/configured.

[Joaquín Sánchez]

also the UnoCSS icon working:

[Joaquín Sánchez]

so the problem now is to auto import these 2 icons...

[Joaquín Sánchez]

@itpropro working (you've an example on examples/vite-vue3/App.vue)

You are not using the convention to use the auto import, the icon tag should be <i-collection-icon />, by default the icon resolver has i as prefix.

In your repo (my local zip copy), I update to latest versions the following deps: vite 2.9.8, unplugin-icons 0.14.3 and @vitejs/plugin-vue 2.3.2 (some other but not required, if you have some problem just request me the full dev dependencies updated).

You also need to add this to the tsconfig.json: "include": ["*.d.ts"], check this https://github.com/antfu/unplugin-vue-components#typescript => Make sure you also add components.d.ts to your tsconfig.json under includes.

For UnoCSS icons, replace UnoCSS plugin with (and use x- prefix or change it to another: BEWARE not using default prefix i-, may collide with this plugin):

Unocss({
      presets: [presetIcons({ prefix: 'x-' })],
    }),

EDIT: also working importing 1 of the icons on src/pages/index.vue.

[Joaquín Sánchez]

also working importing 1 of the icons on src/pages/index.vue , you can check the syntax changes:

[Jan-Henrik Damaschke]

Thanks for you detailed exploration @userquin that helped a lot!
Lot's of stuff, I didn't find in the documentation, as soon as I integrated this, I will create a little docs PR 📜
The packages were indeed quite old and some basic configuration missing as the repo was created in a few minutes in march 😅