Element Plus 图标的使用
Element Plus 的图标是一个可定制且易于集成的图标库，旨在提升用户界面的视觉吸引力和可用性。您可以通过两种主要方式在 Vue.js 项目中使用 Element Plus 图标：**直接引入并使用**，或者**按需引入以减小打包体积**。
直接引入 Element Plus 图标库
这是最简单直接的使用方式，适用于大多数项目。它会将 Element Plus 的所有图标打包到您的项目中。
步骤一：安装 Element Plus
如果您还没有安装 Element Plus，请使用 npm 或 yarn 进行安装：
npm install element-plus --save
# 或者
yarn add element-plus
步骤二：在主入口文件（如 `main.js` 或 `main.ts`）中引入 Element Plus 和其图标
在您的 Vue 项目的入口文件，例如 `src/main.js` 或 `src/main.ts`，添加以下代码：
import { createApp } from vue
import App from ./App.vue
import ElementPlus from element-plus
import element-plus/dist/index.css // 引入 Element Plus 的 CSS
const app = createApp(App)
app.use(ElementPlus)
app.mount(#app)
步骤三：在组件中使用图标
引入 Element Plus 后，您就可以在任何 Vue 组件中使用 `
` 组件来显示图标。图标的名称直接对应 Element Plus 提供的图标名称。
例如，要显示一个“设置”图标，您可以使用：
lttemplategt
ltel-icongtltSetting /gtlt/el-icongt
lt/templategt
ltscript setupgt
import { Setting } from @element-plus/icons-vue
lt/scriptgt
在此示例中：
* **``**: 这是 Element Plus 提供的用于包裹图标的组件。
* **``**: 这是您从 `@element-plus/icons-vue` 导入的具体图标组件。您需要根据您想要显示的图标名称导入相应的组件。
Element Plus 提供了大量的图标，您可以查阅 Element Plus 官方文档的图标部分以获取完整的图标列表和对应的组件名称。
按需引入 Element Plus 图标
对于大型项目，直接引入整个 Element Plus 图标库可能会增加最终打包体积。Element Plus 支持按需引入图标，只将您实际使用的图标打包进去，从而优化性能。
步骤一：安装 Element Plus 和其图标（同上）
如果尚未安装，请先执行安装命令：
npm install element-plus --save
# 或者
yarn add element-plus
步骤二：在组件中使用图标，并按需导入
当您在某个组件中使用某个图标时，只需在该组件的 `