在实际项目中，我们常常需要用到图标，所以本文主要来介绍一下vue3使用elementplus图标的方法。

简单介绍

首先我们需要简单了解Element UI 和Element Plus 在对图标的使用上的不同。

Element UI 使用的是阿里巴巴的图标库，通过字体图标的用法（即使用 el-icon-xxx 的类名）来引入图标。

Element Plus 抛弃了字体图标的用法，而直接使用了 svg 图标。Element Plus 团队自行开发了一套 SVG 图标，并且将SVG图标封装成一个个Vue组件，最后集合成了Element Plus 的图标组件库，保存在@element-plus/icons-vue安装包中。所以其实elementplus图标是组件，既方便维护也方便在应用程序中多次使用。

补充：

Vue中可以直接在模板中使用<svg>标签来插入SVG图标代码。将SVG图标代码复制到模板中，并根据需要添加样式和属性。

示例：

html 复制代码

<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>

在官网中，使用element-plus图标有两种方法：

因为图标也是组件，所以导入后可以直接使用（不推荐）
与el-icon结合使用（推荐）

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

导入

1、手动导入（不推荐）

首先下载element-plus库和element-plus的icons图标库，

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

1、局部导入

html 复制代码

<template>
	// 结合el-icon使用
	// 在 el-icon 上设置 size 和 color 就能控制 svg图标 的大小和颜色
	// 注意： size 属性必须传数字，不能传字符串进去！
	<el-icon :size="30" color="teal"><User /></el-icon>
	<el-icon :size="30" color="teal"><Lock /></el-icon>
</template>

<script setup>
// 局部导入el-icon组件及其样式
import { ElIcon } from 'element-plus'
import 'element-plus/es/components/icon/style/css'
// 局部导入图标组件
import { User,Lock } from '@element-plus/icons-vue'
</script>

2、完整导入（还行，但消耗性能）在main.js中完整导入并注册图标组件

js 复制代码

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) 
// 将每个图标组件变成全局组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { 
	app.component(key, component) 
} 
// 将el-icon变成全局组件
app.component(ElIcon)
app.mount('#app')

在组件中使用

html 复制代码

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

因为element-plus的图标组件无css属性，所以无需导入样式，若需要要自己手动设置css来添加图标属性。

2、自动导入（推荐）

首先下载unplugin-icons unplugin-auto-import unplugin-vue-components这三个插件，这些插件会帮助从 iconify 图标集中自动导入任何图标集。

介绍：

Iconify 是一个开源的图标库，提供了一套丰富的矢量图标，包括了多个图标集，如 FontAwesome、Material Design Icons 等，当然 Element Plus 的一套图标组件也包含在Iconify 图标库中。使用 Iconify，你可以通过引入相应的图标集，并使用相应的图标名称来添加图标到你的项目中。

无需下载element-plus库或者element-plus/icons-vue库

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

配置vue.config.js文件

js 复制代码

// 直接复制到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`
                }
  			}]
  		}),
  		AutoImport({
        	resolvers: [
        		IconsResolver({
                	prefix: 'Icon',
                }),
        		ElementPlusResolver()
        	],
      	}),
      	Components({
        	resolvers: [
        		IconsResolver({
        			// alias: { 'icon': "ep", //配置别名 }
                	enabledCollections: ['ep'],
                }),
        		ElementPlusResolver()
        	],
      	}),
      	Icons({
      		autoInstall: true,
      	})
  	]
  }
})

在组件中使用

html 复制代码

<template>
	<el-input prefix-icon="IEpUser" placeholder="请输入用户名"></el-input>
	<el-icon><IEpUser/></el-icon>
	<i-ep-delete />
</template>

2-1、代码解析

Iconify 图标结构由三部分组成：{prefix}-{collection}-{icon}
prefix：icon的前缀，默认值为'i',可设置成false,如果设置成false,那么组件使用就变成 <ep-edit/>
collection: 默认是iconify
icon: 图标名字
collection对应的是 enabledCollections配置，默认是iconify上的所有图标。这里设置的是['ep']，表示的是Iconify 中的 element-plus 的图标，也可以设置mdi、ant-design，他会自动根据名称在package.json安装对应的SVG图标文件
Icons()表示会自动安装@iconify-json/ep的依赖，设置为true,他就会自动安装iconify 图标。

问题

情景：图标在按钮中使用

html 复制代码

<template>
    <!-- 方式一 -->
	<el-button type="primary" size="small" @click="searchResource"><i-ep-search/>查询</el-button>
	<!-- 方式二 -->
	<el-button type="success" size="small" :icon="Edit" round @click="openAddUserForm('add')">新增用户</el-button>
</template>

对于方式一，将图标放入el-button里面，会出现图标比button大的情况，显然不是我们想看到的。
对于方式二，使用:icon="Edit"则图标的大小和button里面字体大小保持一致size=small

其他问题我遇到再说~~~嘻嘻！！！