[JavaScript知识库]vue3 element-plus 使用icon图标组件

一、vue3 element-plus 使用icon图标组件

目前 element-plus版本是2.0.4

当前版本的icon还没有默认在组件中，需要另外安装才能使用图标。

使用步骤：

1.安装??@element-plus/icons-vue库

npm install @element-plus/icons-vue

2.全局引入icon组件

import { createApp } from 'vue'
import App from './App.vue'
import installElementPlus from './plugins/element'

//main.js
import * as ElIconModules from '@element-plus/icons-vue'

var app=createApp(App);

app.use(installElementPlus);

Object.keys(ElIconModules).forEach(function (key) {
    app.component(ElIconModules[key].name, ElIconModules[key])
  })
app.mount('#app');

3.使用icon

   <edit style="width: 1em; height: 1em; margin-right: 8px;" />
    <share style="width: 1em; height: 1em; margin-right: 8px;" />
    <delete style="width: 1em; height: 1em; margin-right: 8px;" />
    <search style="width: 1em; height: 1em; margin-right: 8px;" />

     <el-button type="primary">
    <el-icon style="vertical-align: middle;">
      <search />
    </el-icon>
    <span style="vertical-align: middle;"> Search </span>
  </el-button>

之前的使用方式还在支持中，目前需要特殊导入。

<template>
  <div class="flex">
    <el-button type="primary" :icon="Edit"></el-button>
    <el-button type="primary" :icon="Share"></el-button>
    <el-button type="primary" :icon="Delete"></el-button>
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary">
      Upload<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons-vue'
</script>

4.动态绑定icon/?菜单动态绑定icon

// html
<template>
  <component class="xxx" :is="iconName"></component>
</template>

// script
export default {
  name: 'Login',
  setup() {
    const iconName = 'Search'
    return {
      iconName
    }
  }
}

更多：

error Component name “xxx“ should always be multi-word vue/multi-word-comp

Element-ui和Element-Plus的区别_Element2和Element3的区别

Vue2和Vue3的区别_Vue3和Vue2的区别