There are tsx and vue files in the project, can't both files be automatically imported?

[wangrongding]

In the .vue file, it works fine

// vite.config.ts
IconsResolver({
  enabledCollections: ['ep']
})

But in tsx， I tried to write like this, but it didn't work😢

// vite.config.ts
plugins: [
  Icons({
    jsx: 'react', // 'react' or 'preact'
    compiler: 'jsx', // 'vue2', 'vue3', 'jsx'
  }),
  // Api自动导入
  AutoImport({
    resolvers: [
      IconsResolver({
        prefix: 'i', // 图标前缀，默认为i
        enabledCollections: ['ep'],
        extension: 'jsx',
      }),
    ],
  }),
  // 按需导入组件
  Components({
    resolvers: [
      // 自动注册图标组件
      IconsResolver({
        prefix: 'i', // 图标前缀，默认为i
        extension: 'jsx',
        enabledCollections: ['ep'],
      }),
    ],
  }),
],

[userquin]

@wangrongding check React & Solid in the README: https://github.com/antfu/unplugin-icons#auto-importing

Also change the extension to tsx, you've jsx in your configuration.

[wangrongding]

@wangrongding check React & Solid in the README: https://github.com/antfu/unplugin-icons#auto-importing

Also change the extension to tsx, you've jsx in your configuration.

However, if you change the extension to tsx, the automatic import of the .vue file will fail.

[userquin]

@wangrongding use vue or tsx, it seems like a limitation here and on auto import (I think vue + jsx shouldn't work either)

[wangrongding]

@wangrongding use vue or tsx, it seems like a limitation here and on auto import (I think vue + jsx shouldn't work either)

Because some logic can be implemented very flexibly in tsx. 😢😢So, it can't be done?

[userquin]

@wangrongding it can be done, but we need to change both plugins to support multiple extensions

[wangrongding]

Really looking forward to it!💖

[userquin]

@wangrongding auto import supports multiple extensions, so we only need to add it here... I'll check it

[wangrongding]

@userquin OK, thank you very much!👍🥰

[userquin]

@wangrongding can you put here your plugin configuration?

[wangrongding]

@wangrongding can you put here your plugin configuration?

@userquin ok~

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import * as path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// https://vitejs.dev/config/

export default defineConfig((config) => ({
  plugins: [
    vue(),
    vueJsx(),
    Icons({
      jsx: 'react', // 'react' or 'preact'
      compiler: 'vue3', // 'vue2', 'vue3', 'jsx'
    }),
    // Api自动导入
    AutoImport({
      // 目标文件
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      // 全局引入插件
      imports: ['vue', 'vue-router'],
      resolvers: [
        // 自动导入Element-Plus的Api
        ElementPlusResolver(),
        // 自动导入图标组件
        // 自动导入必须遵循名称格式 {prefix：默认为i}-{collection：图标集合的名称}-{icon：图标名称}
        // IconsResolver(),
        IconsResolver({
          prefix: 'i', // 图标前缀，默认为i
          enabledCollections: ['ep'],
          extension: 'tsx',
        }),
      ],
      // eslint报错解决方案
      eslintrc: {
        enabled: true, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      },
    }),
    // 按需导入组件
    Components({
      dts: true, // enabled by default if `typescript` is installed
      resolvers: [
        // 自动注册图标组件
        IconsResolver({
          prefix: 'i', // 图标前缀，默认为i
          extension: 'tsx',
          enabledCollections: ['ep'],
        }),
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],
    }),
  ],
}))

[userquin]

@wangrongding can you try adding 2 IconsResolver in AutoImport and Components plugins for vue and tsx, that's, you will end up having something like this:

AutoImport({
  resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          prefix: 'i', 
          enabledCollections: ['ep'],
          extension: 'tsx',
        }),
        IconsResolver({
          prefix: 'i', 
          enabledCollections: ['ep'],
          extension: 'vue',
        }),
  ]
}),
Components({
    resolvers: [
        IconsResolver({
          prefix: 'i',
          extension: 'vue',
          enabledCollections: ['ep'],
        }),
        IconsResolver({
          prefix: 'i',
          extension: 'tsx',
          enabledCollections: ['ep'],
        }),
        ElementPlusResolver(),
    ],
})

[wangrongding]

@userquin OK, I'll try it~👍

It's a little weird to write.😂 When you update the version, I will rewrite the logic of this piece again.

[userquin]

@wangrongding

maybe we need to add another Icons plugin, that's, one for vue and another for tsx and we also need to change the prefix on the resolvers

Instead having this:

Icons({
      jsx: 'react', // 'react' or 'preact'
      compiler: 'vue3', // 'vue2', 'vue3', 'jsx'
    }),

we should have this:

Icons({
   compiler: 'vue3',
}),
Icons({
   jsx: 'react',
   compiler: 'jsx'
}),

[userquin]

@wangrongding can you provide a minimal repro on gh or stackblizt?

[wangrongding]

@userquin thank you, my friend. However, you need to wait for a while, I will provide you with it when I get home from getting off work later~ 😂

about an hour later...

[userquin]

@wangrongding I'll check your repro tonight when I get off work too

EDIT: you should check the presetIcons from UnoCSS, all the SFC icons will disappear, ALL the icons will go to your CSS, you only need to replace this plugin with UnoCSS adding the presetIcons (this preset is using also the @iconify library).

https://uno.antfu.me/?s=guide:preset-icons

[wangrongding]

💖It's okay, this problem is not urgent, I am writing an open-source management back office

The problem we are talking about is happening in this repository. https://github.com/wangrongding/vue-super-admin/blob/main/src/layout/SideBar/Menu.tsx#L45

[userquin]

@wangrongding should be something like this?

You have not lodash in dependencies, I just change this to do the test:

// src/router/utils.ts
  const list = routesList.map(r => {
    return {...r}
  })
 // const list = cloneDeep(routesList)

Check this commit I apply to your vite.config.ts to my fork (beware, I use pnpm, just check the vite.config.ts and Menu.tsx changes: you should update to latest Vite 2 version 2.9.14 to avoid multiple page reload on dep discovery): https://github.com/userquin/vue-super-admin-unplugin-icons-221/commit/a4ee75af0df44c3177623dde168261c8681073f7

[userquin]

@wangrongding check also this another commit, just removing the i prefix from the second resolver in components plugin: https://github.com/userquin/vue-super-admin-unplugin-icons-221/commit/0c9205ec0f0ec43511e6a20eb0f8b774db3268ab

[userquin]

in fact, we can remove the last resolver in the components plugin: https://github.com/userquin/vue-super-admin-unplugin-icons-221/commit/5351f8e4c373aa35cddcb405430e1165c24f9690

so, in summary:

• we need to include the vueJsx plugin
• we need to include the unplugin icons twice to support vue and jsx: it will also work without the jsx (the include in the components plugin do the trick)
• we need to include the same include on auto import and components plugin
• all the icons will be Vue components the icons were always Vue components ;)

EDIT: we don't need to configure the unplugin icons for jsx: https://github.com/userquin/vue-super-admin-unplugin-icons-221/commit/a48ad8a9bba9491921abe32e993ea9b0bd944d91

[wangrongding]

Wow! Thank you, my good man!💖

I apologize for not providing you with the minimum replica library in time after work yesterday.

I wish you a happy life and all the best👍