无法实现element plur的icon图标的按需引入

无法实现element plur的icon图标的按需引入！
在网上看到很多朋友说，vite.config配置后，在组件中应该这样使用：

<el-icon size="20">
    <i-ep-edit-location />
  </el-icon>

我也尝试了这方法，还是失败了！
看看我的配置吧

// vite.config.ts
import { defineConfig } from 'vite'
// 自动引入饿了么
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 自动引入饿了么的svg图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import path from "path";
import vue from '@vitejs/plugin-vue'


// 引入svg需要的插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  return {
    base: './',
    resolve: {
      alias: {
        // 如果报错__dirname找不到，需要安装node,执行npm install @types/node --save-dev
        "@": path.resolve("./src"),
      },
    },


    plugins: [
      vue(),
      AutoImport({
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/, /\.vue\?vue/, // .vue
        ],
        imports: [
          'vue',
          'vue-router',
          {
            'axios': [
              ['default', 'axios'], // import { default as axios } from 'axios',
            ],
          },
          // example type import
          {
            from: 'vue-router',
            imports: ['RouteLocationRaw'],
            type: true,
          },
        ],
        resolvers: [
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon',
          }),
          ElementPlusResolver(),
        ]
      }),


      Components({
        resolvers: [
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep'],
          }),
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
        ],
      }),
      Icons({
        autoInstall: true,
      }),

      createSvgIconsPlugin({
        // svg图片的存放位置  后面直接通过svg图片名直接使用
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),

    ],


    css: {
      preprocessorOptions: {
        // 定义全局scss变量 引入scss变量文件
        scss: {
          additionalData: '@import "./src/style/variable.scss";',
        },
      },
    },
  }
})

望朋友们答复下，不胜感谢！

引用皆我百晓生小程序回复内容作答：

根据你提供的代码和描述，我注意到你已经使用了vite作为构建工具，并且使用了unplugin相关的插件来自动导入和引入Element Plus的组件和图标。

根据你的描述，你尝试了以下方式来使用Element Plus的图标：

<el-icon size="20">
  <i-ep-edit-location />
</el-icon>

然而，你遇到了问题，图标没有正确显示。

从你的代码中来看，配置上应该没有什么问题。不过，你可以尝试以下几点来解决问题：

确保已经按照官方文档正确安装了Element Plus，并且已经在项目中正确导入Element Plus的样式。你可以检查一下这些步骤是否正确完成。
确认你已经安装了Element Plus的图标集 (@element-plus/icons)，并且已经在项目中正确导入它们。你可以在你的代码中检查是否正确使用了unplugin-icons插件，并且是否配置了Element Plus图标集。
检查你的图标的命名是否正确。如果你的图标集配置了前缀为Icon，则在使用时应该为IconEpEditLocation，而不是i-ep-edit-location。

如果你按照上述步骤检查后问题仍然存在，我建议你参考Element Plus的官方文档或在相关的社区寻求帮助，他们可能能够给予你更具体的解决方案。希望这些提示能帮助到你！

终于解决了！
上面的配置不变动，需另外引入一个包

npm i -D @iconify/json

@iconify/json （~120MB）包括来自 Iconify 的所有图标集，因此您可以安装一次并根据需要使用其中任何一个（只有您实际使用的图标才会捆绑到生产版本中）。