无法实现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";',
        },
      },
    },
  }
})

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