How to use icons in both .vue files and .jsx files?

[wjw020206]

The icon displays normally in .vue, but not in .jsx. How should I configure it to display in .vue and .jsx at the same time?

export default [
  vue(),
  vueJsxPlugin(),
  AutoImport({
    resolvers: [ElementPlusResolver()],
    imports: ['vue', 'vue-router', 'pinia'],
    dirs: ['src/store/**/*'],
    vueTemplate: true,
    defaultExportByFilename: false,
    dts: './config/auto-imports.d.ts',
    eslintrc: {
      enabled: true,
      filepath: './config/.eslintrc-auto-import.json',
      globalsPropValue: true
    }
  }),
  Components({
    resolvers: [
      ElementPlusResolver(),
      VueUseComponentsResolver(),
      IconsResolver({
        prefix: false,
        enabledCollections: ['ep']
      })
    ],
    dirs: ['src/components', 'src/layouts'],
    directoryAsNamespace: false,
    dts: './config/components.d.ts'
  }),
  Icons({
    autoInstall: true,
    compiler: 'vue3'
  })
];

[Matthijz98]

You can add a second Icons()

Like This

...
  Icons({
    autoInstall: true,
    compiler: 'vue3'
  })
    Icons({
    autoInstall: true,
    compiler: 'jsx'
  })

[wjw020206]

Thank you so much