实现一个vite插件，该插件可以自动加载iconfiy的图标集合

要在Vite项目中实现一个自动加载Iconify图标的插件，你需要按照以下步骤操作：

1. **安装依赖**:
首先，你需要安装`@vitejs/plugin-vue`和`@mdi/js`（如果你计划使用MDI图标库），还有`vue-meta`用于管理元数据。运行以下命令：

   npm install @vitejs/plugin-vue @mdi/font vue-meta

2. **创建插件**:
创建一个名为`iconifyAutoLoader.js`的文件，这是一个简单的Vite插件示例：

   import { createVuePlugin } from '@vitejs/plugin-vue';
   import VueMeta from 'vue-meta';

   export default function iconifyAutoLoader({ app }) {
     // 注册VueMeta插件
     app.use(VueMeta);

     // 加载并注册Iconify图标集
     const mdi = require('@mdi/font').default;
     mdi.fontface();
     mdi.loadFontFace();

     // 使用vue-meta设置图标前缀
     app.config.globalProperties.$iconify = {
       prefix: 'md',
       setIconPrefix(prefix) {
         mdi.iconfontPrefix = prefix;
         Object.keys(mdi.library).forEach((iconName) => {
           this[iconName] = () => mdi icons `${prefix}-${iconName}`;
         });
       },
     };

     // 如果需要自定义配置，可以在适当的地方添加
     // 这里只是一个基础版本，可以根据需求修改
   }

3. **在Vite配置中应用插件**:
在`vite.config.js`中，将刚才创建的插件添加到plugins数组中：

   import { defineConfig } from 'vite';
   import iconifyAutoLoader from './iconifyAutoLoader.js';

   export default defineConfig({
     plugins: [iconifyAutoLoader],
     // ...其他配置...
   });

4. **在组件中使用图标**:
现在你可以像这样在Vue组件中使用Iconify图标了：

   <template>
     <div>
       <button :class="$iconify('mdi-heart')">Like</button>
     </div>
   </template>

   <script>
   import { onMounted } from 'vue';
   import { mdiHeart } from '@mdi/js'; // 引入图标

   export default {
     setup() {
       onMounted(() => {
         // 初始化图标前缀，例如切换到Material Design Icons
         $iconify.setIconPrefix('md');
       });

       return {
         mdiHeart,
       };
     },
   };
   </script>