vue3使用elementplus圖標(biāo)方式

更新時間：2026年03月26日 16:32:52 作者：qq_45438471

這篇文章主要介紹了vue3使用elementplus圖標(biāo)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、簡單介紹

首先我們需要簡單了解Element UI 和Element Plus 在對圖標(biāo)的使用上的不同。

Element UI 使用的是阿里巴巴的圖標(biāo)庫，通過字體圖標(biāo)的用法（即使用 el-icon-xxx 的類名）來引入圖標(biāo)。

Element Plus 拋棄了字體圖標(biāo)的用法，而直接使用了 svg 。Element Plus 團(tuán)隊自行開發(fā)了一套圖標(biāo)，并且保存在@element-plus/icons-vue安裝包中。

補(bǔ)充：

Vue中可以直接在模板中使用<svg>標(biāo)簽來插入 SVG 數(shù)據(jù)。將代碼復(fù)制到模板中，并根據(jù)需要添加樣式和屬性。

示例：

<template>
  <div>
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2L1 21h22L12 2zm0 4.88L18.12 19H5.88L12 6.88z" />
    </svg>
  </div>
</template>

<style>
.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
</style>

ElementPus 團(tuán)隊就是利用了這個特點封裝圖標(biāo)，所以使用elementplus圖標(biāo)就是使用組件。

在官網(wǎng) 中，使用element-plus圖標(biāo)有兩種方法：

因為圖標(biāo)也是組件，所以導(dǎo)入后可以直接使用（不推薦）
與el-icon結(jié)合使用（推薦）

下面主要講方法二的使用。

二、導(dǎo)入

1、手動導(dǎo)入（不推薦）

首先下載element-plus庫和element-plus的icons圖標(biāo)庫，

npm i -D element-plus @element-plus/icons-vue

1、局部導(dǎo)入

<template>
	// 結(jié)合el-icon使用
	// 在 el-icon 上設(shè)置 size 和 color 就能控制 svg圖標(biāo) 的大小和顏色
	// 注意： size 屬性必須傳數(shù)字，不能傳字符串進(jìn)去！
	<el-icon :size="30" color="teal"><User /></el-icon>
	<el-icon :size="30" color="teal"><Lock /></el-icon>
</template>

<script setup>
// 局部導(dǎo)入el-icon組件及其樣式
import { ElIcon } from 'element-plus'
import 'element-plus/es/components/icon/style/css'
// 局部導(dǎo)入圖標(biāo)組件
import { User,Lock } from '@element-plus/icons-vue'
</script>

2、全局注冊（還行，但消耗性能）

在main.js中將圖標(biāo)組件全局注冊

import { createApp } from 'vue'

import * as ElementPlusIconsVue from '@element-plus/icons-vue' 
import { ElIcon } from 'element-plus'
import 'element-plus/es/components/icon/style/css'

const app = createApp(App) 
// 將所有圖標(biāo)組件逐一全局注冊
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { 
	app.component(key, component) 
} 
// 將el-icon全局注冊
app.component(ElIcon)
app.mount('#app')

在組件中使用

<template>
	<el-icon :size="30" color="teal"><User /></el-icon>
	<el-icon :size="30" color="teal"><Lock /></el-icon>
</template>

因為element-plus的圖標(biāo)組件無css屬性，所以無需導(dǎo)入樣式，若需要要自己手動設(shè)置css來添加圖標(biāo)屬性。

2、自動導(dǎo)入（推薦）

首先下載unplugin-icons unplugin-auto-import unplugin-vue-components這三個插件，這些插件會幫助從 iconify 圖標(biāo)集中自動導(dǎo)入任何圖標(biāo)集。

介紹：

Iconify 是一個開源的圖標(biāo)庫，提供了一套豐富的矢量圖標(biāo)，包括了多個圖標(biāo)集，如 FontAwesome、Material Design Icons 等，當(dāng)然 Element Plus 的一套圖標(biāo)組件也包含在Iconify 圖標(biāo)庫中。

使用 Iconify，你可以通過引入相應(yīng)的圖標(biāo)集，并使用相應(yīng)的圖標(biāo)名稱來添加圖標(biāo)到你的項目中。

無需下載element-plus庫或者element-plus/icons-vue庫

npm i -D unplugin-icons unplugin-auto-import unplugin-vue-components

配置vue.config.js文件

// 直接復(fù)制到vue.config.js中去就可以了
const { defineConfig } = require('@vue/cli-service')

const ElementPlus = require('unplugin-element-plus/webpack')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
  	plugins: [
  		/**
  		ElementPlus({
  			libs: [{
  				libraryName: 'element-plus',
                esModule: true,
                resolveStyle: (name) => {
                	return `element-plus/theme-chalk/${name}.css`
                }
  			}]
  		}),**/
  		// 主要功能：導(dǎo)入組件和樣式
  		AutoImport({
        	resolvers: [
        		IconsResolver({
                	prefix: 'Icon',
                }),
        		ElementPlusResolver()
        	],
      	}),
      	// 主要功能：將組件變成全局組件（注冊組件）
      	Components({
        	resolvers: [
        		IconsResolver({
        			// alias: { 'icon': "ep", //配置別名 }
                	enabledCollections: ['ep'],
                }),
        		ElementPlusResolver()
        	],
      	}),
      	// 下載所需圖標(biāo)組件
      	Icons({
      		autoInstall: true,
      	})
  	]
  }
})

在組件中使用

<template>
	<el-input prefix-icon="IEpUser" placeholder="請輸入用戶名"></el-input>
	<el-icon><IEpUser/></el-icon>
	<i-ep-delete />
</template>

2-1、代碼解析

Iconify 圖標(biāo)結(jié)構(gòu)由三部分組成：{prefix}-{collection}-{icon}
prefix：icon的前綴，默認(rèn)值為’i’,可設(shè)置成false,如果設(shè)置成false,那么組件使用就變成 <ep-edit/>
collection: 默認(rèn)是iconify
icon: 圖標(biāo)集中對應(yīng)的圖標(biāo)名字
collection對應(yīng)的是 enabledCollections配置，默認(rèn)是iconify上的所有圖標(biāo)。這里設(shè)置的是[‘ep’]，表示的是Iconify 中的 element-plus 的圖標(biāo)，也可以設(shè)置mdi、ant-design，它會自動根據(jù)名稱在package.json下載安裝對應(yīng)的圖標(biāo)集
Icons()表示會自動安裝@iconify-json/ep的依賴，設(shè)置為true,他就會自動安裝iconify 圖標(biāo)。

三、注意

情景：圖標(biāo)在按鈕中使用

<template>
    <!-- 方式一 -->
	<el-button type="primary" size="small">
		查詢
		<el-icon size="40px">
			<i-ep-search/>
		</el-icon>
	</el-button>
	<!-- 方式二 -->
	<el-button type="success" size="small" :icon="IEpSearch" round >
		新增用戶
	</el-button>
</template>

運(yùn)行程序后，你會發(fā)現(xiàn)：對于方式一，因為el-button和el-icon都有size屬性，所以當(dāng)同時給兩者設(shè)定size值時，可能會出現(xiàn)icon比button大的情況，顯然不是我們想看到的。而使用方法二可以有效規(guī)避這個風(fēng)險，大家可以根據(jù)需求選擇哪種方式。