Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

In this article

Like + attention + favorites = learned

In the Vue ecosystem, Element UI is the top component library. When Vue was released to 3.0, Element released its component library. Element Plus. Usage changed as well.

For example, this article will talk about the use of el-icon.

In Element Plus, ICONS are not used the same way they used to be. The official documentation does explain how to use it, but it’s not very detailed and can be a stumbling block for beginners.

This article will take a few minutes to explain several uses and considerations of el-icon.

Note: pay attention to the date and use of this articleElement PlusVersions may differ in use over time.

Vue: ^ 3.2.25

Element - plus: ^ 2.1.7

@ element - plus/ICONS - vue: ^ 1.1.4

A preliminary understanding

Differences between Icon’s Use of Element UI and Element Plus

invue2 + Element UIThe use of the

<i class="el-icon-edit"></i>
Copy the code

invue3 + Element PlusThe use of the

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

<! You can also use the icon tag directly, without wrapping the parent tag.
<edit />
Copy the code

Personally, THE Element UI is simpler to use.

In the next article I’ll show you how to repackage an Icon component based on Element Plus to make it more usable.

Use logic of Icon in Element Plus

Element Plus abandons the use of font ICONS and goes straight to SVG.

It can be said that ICONS are carried out for separate maintenance. So you must download the SVG icon library before using it.

To download the SVG icon library:

npm install @element-plus/icons-vue
Copy the code

You can also download it using Yarn or PNPM

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


# pnpm
pnpm install @element-plus/icons-vue
Copy the code

There are two ways to use SVG directly or in conjunction with the El-Icon tag.

I’m going to talk about both of these uses (global and local introductions)

Only use SVG

You don’t have to install Element Plus if you just use the SVG icon library provided by Element Plus. But this scenario should be rare.

Installation command:

npm install @element-plus/icons-vue
Copy the code

The types of SVG ICONS provided by Element Plus can be viewed in the icon collection.

Use the SVG component to use the CSS to set the size and color of ICONS.

Introduced the global

The all-in approach registers all SVG components globally, which is easier to use, but sacrifices a bit of performance.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import * as Icons from '@element-plus/icons-vue' // Import all the Icons and name them Icons

const app = createApp(App)

// Register all SVG components by traversing, sacrificing a bit of performance
for (let i in Icons) {
  app.component(i, Icons[i])
}

app.mount('#app')
Copy the code

If you don’t want to import them all, but just want to register an SVG icon component globally, you can register it in main.js as follows (I used the Edit icon as an example)

/* omit some code */
import { Edit } from '@element-plus/icons-vue' // Introduce the Edit icon

const app = createApp(App)

app.component(Edit.name, Edit) Register the Edit icon globally

app.mount('#app')
Copy the code

Use in pages

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

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

Local introduction

Local introduction only needs to be introduced where it is used.

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

<script setup>
import { Edit } from '@element-plus/icons-vue' // Introduce the Edit SVG component
</script>

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

Use with El-Icon

Element Plus also provides an El-Icon component to wrap around SVG icon components, making it easier to set icon sizes and colors.

But you need to install Element Plus in your project, using the following installation command:

Select one of the installation methods.

# NPM
npm install element-plus --save

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus
Copy the code

Once Element Plus is installed, it can be introduced globally or locally.

Introduced the global

main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { Edit } from '@element-plus/icons-vue' // Introduce the Edit icon
import App from './App.vue'

const app = createApp(App)
app.component(Edit.name, Edit) Register the Edit icon globally

app
.use(ElementPlus)
.mount('#app')
Copy the code

Use in pages

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

At this point, setting size and color on el-Icon controls the size and color of the SVG icon.

One thing to notesizeAttributes must be passed in numbers, not strings!

Local introduction

<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>
Copy the code

For local import, we only need to import the CSS corresponding to the icon.

. If you are in the main js introduced element – plus/dist/index. The CSS doesn’t need to introduce element on the page – plus/es/components/icon/style/CSS.

Recommended reading

👍 Vite Vue2 Project (Vue2 + VUE-Router + VUex)

👍 “Vue3 over 10 Component Communication Modes”

👍 18 Websites to Make your Background look cool

My blog is synchronized to tencent cloud + community, invite everyone to come together: cloud.tencent.com/developer/s…