Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use the el-icon of Element Plus". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this article "how to use the el-icon of Element Plus" can help you solve the problem.

In Vue ecology, Element UI is the top component library. When Vue was released to 3. 0, Element also released the corresponding component library. Also known as Element Plus. The subsequent usage has also changed.

For example, the use of el-icon in this article.

The use of the Icon icon in Element Plus is different from what it used to be. Although the official documentation also explains how to use it, it is not very detailed and may cause a hurdle for beginners.

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

Note: it is important to note that there may be usage differences over time and the Element Plus version used in this article.

Vue: ^ 3.2.25

Element-plus: ^ 2.1.7

@ element-plus/icons-vue: ^ 1.1.4

A preliminary understanding of the differences between Icon in the usage of Element UI and Element Plus

In the usage of vue2 + Element UI

In the usage of vue3 + Element Plus

Personally, I think the use of Element UI will be easier.

In the next article, I will explain how to repackage a better Icon component based on Element Plus.

The use Logic of Icon in Element Plus

Element Plus abandoned the use of font icons and directly used svg.

It can be said that the icon was brought out for separate maintenance. So you must download the svg icon library before using it.

The command to download the svg icon library:

Npm install @ element-plus/icons-vue

You can also download it using Yarn or pnpm.

# Yarnyarn add @ element-plus/icons-vue# pnpmpnpm install @ element-plus/icons-vue

There are two ways to use it, one is to use svg directly, and the other is to use it with the el-icon tag.

Let's talk about these two modes of use (both global and local introduction).

Use only svg

If you only need to use the svg icon library provided by Element Plus, you don't have to install Element Plus. But such scenes should be rare.

Installation commands:

Npm install @ element-plus/icons-vue

The types of svg icons provided by Element Plus can be viewed in the icon collection.

Use icons through the svg component. If you want to set the size and color of icons, you need to set them through css.

Global introduction

The full introduction method registers all svg components globally, which is convenient to use, but at the expense of a little performance.

Main.js

Import {createApp} from 'vue'import App from'. / App.vue'import * as Icons from'@ element-plus/icons-vue' / / introduce all icons and name them Iconsconst app = createApp (App) / / register all svg components by traversing, sacrificing a little bit of performance for (let i in Icons) {app.component (I, Iconsi)} app.mount ('# app')

If you don't want to introduce it all, but just want to register a svg icon component globally, you can register in main.js in the following ways (I'll take the Edit icon as an example)

/ * omit part of the code * / import {Edit} from'@ element-plus/icons-vue' / / introduce Edit icon const app = createApp (App) app.component (Edit.name, Edit) / / globally register Edit icon app.mount ('# app')

Use in the page

Local introduction of svg {width: 40px; height: 40px; color: red;}

The way of local introduction can only be introduced where it is used.

Import {Edit} from'@ element-plus/icons-vue' / / introduces Edit as a svg component svg {width: 40px; height: 40px; color: red;} for use with el-icon

Element Plus also provides the el-icon component to wrap the svg icon component, making it easier to set the size and color of the icon.

However, you need to install Element Plus in the project with the following installation command:

# choose one of the methods to install. # NPMnpm install element-plus-save# Yarnyarn add element-plus# pnpmpnpm install element-plus

After installing Element Plus, it can be introduced globally or locally.

Global introduction

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 Edit icon import App from'. / App.vue'const app = createApp (App) app.component (Edit.name, Edit) / / globally register Edit icon app.use (ElementPlus) .mount ('# app')

Use in the page

At this point, you can control the size and color of the svg icon by setting size and color on el-icon.

It should be noted that the size attribute must pass a number, not a string!

Local introduction of import {ElIcon} from 'element-plus'import {Edit} from' @ element-plus/icons-vue'import 'element-plus/es/components/icon/style/css'

For local introduction, we only need to introduce the corresponding css of icon.

If you introduce element-plus/dist/index.css in main.js, you don't need to introduce element-plus/es/components/icon/style/css on the page.

This is the end of the content about "how to use the el-icon of Element Plus". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.