Vue3 Element Plus 使用阿里图标库：<icon>组件详解

在 Vue3 项目中使用 Element Plus 的 <icon> 组件并引入阿里图标库，可以按照以下步骤操作：

1. 在项目中安装阿里图标库的依赖包，可以使用 npm 或 yarn 进行安装，具体命令如下：

npm install @icon-park/vue-next @icon-park/vue-symbol-next

2. 在项目的入口文件中引入阿里图标库的依赖包并注册到 Vue 实例中，例如：

import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import { IconParkVue, IconParkSymbolVue } from '@icon-park/vue-next'

const app = createApp(App) app.use(ElementPlus) app.component('icon-park', IconParkVue) app.component('icon-park-symbol', IconParkSymbolVue) app.mount('#app')

3. 在 `<icon>` 组件中使用阿里图标库的图标，例如：

其中，name 属性指定阿里图标库中的图标名称，id 属性指定阿里图标库中的图标 ID，size 属性指定图标的尺寸，color 属性指定图标的颜色。需要注意的是，如果使用了阿里图标库的图标，需要引入对应的依赖包并注册对应的组件。