vue 项目如何使用Element-plus belle图标

在Vue项目中引入Element Plus和Belle图标，你需要按照以下步骤操作：

1. **安装依赖**:
首先，确保已经在你的项目中安装了`vue`, `element-plus` 和 `@element-plus/icons`（Belle图标包）。如果还没有，可以分别通过`npm` 或 `yarn` 安装：

   npm install vue element-plus @element-plus/icons
   # 或者
   yarn add vue element-plus @element-plus/icons

2. **配置Element Plus**:
在项目的主入口文件（如`main.js` 或者 `src/main.js`）中，注册Element Plus组件库：

   import { createApp } from 'vue';
   import ElementPlus from 'element-plus';
   import 'element-plus/dist/index.css'; // 引入样式

   const app = createApp(App);
   app.use(ElementPlus);

   // 如果需要按需加载Icon，可以单独引入
   // import '@element-plus/icons/lib/index.css';
   // 使用时，import特定的icon，例如 '@element-plus/icons/lib/notification'
   // 然后在模板中使用 `<el-icon>...</el-icon>`

   app.mount('#app');

3. **使用Belle图标**:
Belle图标（Belle-Elemenents）通常通过类似的方式导入并使用。你可以直接在需要的地方导入Belle的Icon组件，然后添加到HTML元素中：

   <template>
     <div>
       <el-icon :icon="['@belle-icons', 'bell']" /> <!-- 使用Belle图标 -->
     </div>
   </template>

   <script setup>
   import { useIcons } from '@element-plus/icons-vue';

   // 初始化Icon组件
   const icons = useIcons();
   
   // 使用方法
   const iconName = ['@belle-icons', 'bell'];
   const iconEl = icons.icon(iconName);
   </script>

这里`useIcons()`函数提供了一个API来动态获取图标组件。

4. **注意事项**:
- 在使用Belle图标前，确保已经安装了`@belle-icons`库，并且它的CSS也被加载了。
- 要查看完整的图标的名称和路径，请查阅它们的官方文档。