乐趣区

关于前端:Element-Plus-的-elicon-到底怎么用

jiezi

一起养成写作习惯！这是我参加「掘金日新打算 · 4 月更文挑战」的第 1 天，点击查看流动详情。

本文简介

点赞 + 关注 + 珍藏 = 学会了

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

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

在 Element Plus 里，Icon 图标 的用法和以前不一样了。尽管官网文档也有阐明怎么用，但不是十分具体，可能会给老手带来一丢丢阻碍。

本文将花几分钟的工夫解说 el-icon 几种用法和注意事项。

留神：须要注意本文发表工夫与应用的 Element Plus 版本，随着工夫的推移可能会呈现应用上的差别。

vue: ^3.2.25

element-plus: ^2.1.7

@element-plus/icons-vue: ^1.1.4

初步理解

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 UI 的用法会更加简略。

下一篇文章我会解说如何在 Element Plus 的根底上二次封装出一个更好用的 Icon 组件 。

Icon 在 Element Plus 中的应用逻辑

Element Plus 摈弃了字体图标的用法，间接应用了 svg 的形式。

能够说，图标这个货色被拎进去独自保护了。所以在应用前必须把 svg 图标库 下载下来。

下载 svg 图标库 的命令：

npm install @element-plus/icons-vue

你也能够应用 Yarn 或 pnpm 的形式下载 

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


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

应用的形式有 2 种，一种是间接应用 svg，另一种是配合 el-icon 标签一起应用。

接下来就别离讲讲这两种应用形式（全局和部分引入都会讲到）

只应用 svg

如果你只需应用 Element Plus 提供的 svg 图标库 的话，是能够不装置 Element Plus 的。不过这种场景应该很少呈现。

装置命令：

npm install @element-plus/icons-vue

Element Plus 提供的 svg 图标 品种能够到 图标汇合 里查看。

通过 svg 组件 的形式应用图标，如需设置图标大小和色彩，都须要通过 css 来设置。

全局引入

全副引入的形式会将所有 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')

如果你不想全副引入，只是想在全局注册某个 svg 图标组件 ，能够用以下形式在 main.js 里注册（我以 Edit 图标为例）

/* 省略局部代码 */
import {Edit} from '@element-plus/icons-vue' // 引入 Edit 图标

const app = createApp(App)

app.component(Edit.name, Edit) // 全局注册 Edit 图标

app.mount('#app')

在页面中应用 

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

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

部分引入

部分引入的形式只需在应用的中央引入即可。

<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>

配合 el-icon 一起应用

Element Plus 还提供了 el-icon 组件用来包裹 svg 图标组件 ，使得设置图标大小和色彩更加不便。

但须要在我的项目中装置 Element Plus，装置命令如下：

# 抉择其中一种形式装置即可。# NPM
npm install element-plus --save

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus

装置完 Element Plus 后，能够在全局引入，也能够部分引入。

全局引入

main.js

import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import {Edit} from '@element-plus/icons-vue' // 引入 Edit 图标
import App from './App.vue'

const app = createApp(App)
app.component(Edit.name, Edit) // 全局注册 Edit 图标

app
.use(ElementPlus)
.mount('#app')

在页面中应用 

<el-icon :size="20" color="hotpink">
  <edit />
</el-icon>

此时，在 el-icon 上设置 size 和 color 就能管制 svg 图标 的大小和色彩。

须要留神的是 size 属性必须传数字，不能传字符串进去！

部分引入 

<template>
  <div>
    <el-icon :size="30" color="hotpink">
      <edit />
    </el-icon>
  </div>
</template>

<script setup>
import {ElIcon} from 'element-plus'
import {Edit} from '@element-plus/icons-vue'
import 'element-plus/es/components/icon/style/css'
</script>

部分引入的话，咱们只须要引入 icon 对应的 css 即可。

如果你在 main.js 引入了 element-plus/dist/index.css 就不须要在页面再引入 element-plus/es/components/icon/style/css。

举荐浏览

👍《Vite 搭建 Vue2 我的项目（Vue2 + vue-router + vuex）》

👍《Vue3 过 10 种组件通信形式》

👍《这 18 个网站能让你的页面背景炫酷起来》

退出移动版