Element Plus 的 el-icon 到底怎么用？

背景：

在 Vue 生态里， Element UI 是排名前列的组件库。 在 Vue 发布到 3.0 时，Element 也发布了对应的组件库。也就是 Element Plus 。随之而来的用法也跟着变了。

比如本文要讲的 el-icon 的用法。

初步了解：

Icon 在 Element UI 和 Element Plus 用法上的差别

在 vue2 + Element UI 的用法

<i class="el-icon-edit"></i>

在 vue3 + Element Plus 的用法（总共两种用法）

<!--  第一种  -->
<ElIcon :size="30" color="hotpink">
  <edit />
</ElIcon>

<!-- 第二种  直接使用图标标签，无需父标签包裹 -->
<edit />

安装配置：

Element-plus 中Icon需要安装依赖，然后挂载到全局或者局部。

1.安装

npm下载

npm install @element-plus/icons-vue

Yarn 或 pnpm 的方式下载

# Yarn
yarn add @element-plus/icons-vue


# pnpm
pnpm install @element-plus/icons-vue

2.引入

全局引入   (将所有 svg组件 都注册到全局，用的时候比较方便，但会牺牲一点性能)

放在main.js中

import { createApp } from 'vue'
import App from './App.vue'
import * as Icons from '@element-plus/icons-vue' // 引入所有图标，并命名为 Icons

const app = createApp(App)

// 通过遍历的方式注册所有 svg组件，会牺牲一点点性能
for (let i in Icons) {
  app.component(i, Icons[i])
}

app.mount('#app')

局部引入

<template>
  <div>
    <edit />
  </div>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue' // 引入 Edit 这个 svg组件
</script>

<style>
svg {
  width: 40px;
  height: 40px;
  color: red;
}
</style>

页面中使用:

<!--  第一种  -->
<ElIcon :size="30" color="hotpink">
  <edit />
</ElIcon>

<!-- 第二种  直接使用图标标签，无需父标签包裹 -->
<edit />

样式如何调整：

第一种方式调整样式方法：

<ElIcon :size="30" color="hotpink">
  <edit />
</ElIcon>

第二种方式调整：

<edit />

svg {
  width: 40px;
  height: 40px;
  color: red;
}

总结概括：

1.下载安装

2.挂在全局或局部

3.标签使用