SoFunction
Updated on 2024-11-07

How to use the el-icon of Element Plus

existVue Ecology.Element UI is the top-ranked component library. In theVue Post to3.0 whenElement A corresponding component library has also been released. That isElement Plus . The accompanying usage followed suit.

For example, this article is going to talk aboutel-icon The usage of the

existElement Plus Ri.Icon The usage is not the same as before. While the official documentation does explain how to use it, it's not terribly detailed and may present a slight hurdle for newbies.

This article will take a few minutes to explainel-icon Several uses and cautions.

Note: It is important to note that this article was published at the same time as the one using theElement Plus versions, differences in usage may occur over time.

  • vue: ^3.2.25
  • element-plus: ^2.1.7
  • @element-plus/icons-vue: ^1.1.4

glimpse

Differences in the use of Icon in Element UI and Element Plus

existvue2 + Element UI usage

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

existvue3 + Element Plus usage

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

<!-- You can also use icon labels directly，No need for parent label wrapping -->
<edit />

Personally.Element UI The usage will be much simpler.

In the next post I'll explain how theElement Plus to create a better package based on theIcon Component 。

Icon Logic in Element Plus

Element Plus The usage of the font icon has been discarded in favor of a directsvg The way.

It can be said that the icon thing is carried out and maintained separately. That's why it's important to put thesvg icon library Download it.

downloadingsvg icon library of the order:

npm install @element-plus/icons-vue

You can also use theYarn maybepnpm The way to download

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

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

There are 2 ways to use it, one is to directly use thesvgThe other is to match theel-icon Tags are used together.

We'll talk about each of these two uses next (both global and local introductions will be covered)

Use only svg

If you just use theElement Plus offeredsvg icon library It is possible not to install theElement Plus The. But this scenario should rarely occur.

Installation commands:

npm install @element-plus/icons-vue

Element Plus offeredsvg icon The category can go toIcon Collection Check it out.

pass (a bill or inspection etc)svg component If you want to set the size and color of the icon, you need to set the icon via thecss to set up.

global introduction

The all-in approach will bring in allsvg component It's all registered to the global, which is easier to use, but sacrifices a bit of performance.

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

const app = createApp(App)

// Registering all svg components by traversing them sacrifices a little bit of performance.
for (let i in Icons) {
  (i, Icons[i])
}

('#app')

If you don't want to introduce them all, but just want to globally register a certainsvg icon componentThe following methods can be used in the Sign up (I'm usingEdit (icon as an example)

/* Partial omission of code */
import { Edit } from '@element-plus/icons-vue' // Introducing the Edit icon

const app = createApp(App)

(, Edit) // Register the Edit icon globally

('#app')

Use the

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

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

local introduction

Localized introductions are simply introduced where they are used.

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

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

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

Use with el-icon

Element Plus Also availableel-icon component is used to wrap thesvg icon component , making it easier to set the icon size and color.

But it needs to be installed in the projectElement Plus The installation command is as follows:

# Just choose one of the ways to install it.

# NPM
npm install element-plus --save

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus

finished installingElement Plus After that, it can be introduced globally or locally.

global introduction

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

const app = createApp(App)
(, Edit) // Register the Edit icon globally

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

Use the

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

At this point in time, theel-icon uplinksize cap (a poem)color I'll be able to control it.svg icon The size and color of the

One thing to keep in mind.size Attributes must be passed as 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>

For a localized introduction, we only need to introduce theicon correspondingcss Ready to go.

If you're in Having introducedelement-plus/dist/ There would be no need to reintroduce theelement-plus/es/components/icon/style/css 。

To this article on Element Plus el-icon how to use the article is introduced to this, more related Element Plus el-icon content please search for my previous articles or continue to browse the following related articles I hope that you will support me more in the future!