vue3使用elementplus图标_vue3 elementplus 图标

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

一、简单介绍

  首先我们需要简单了解Element UI 和Element Plus 在对图标的使用上的不同。
  Element UI 使用的是阿里巴巴的图标库，通过字体图标的用法（即使用 el-icon-xxx 的类名）来引入图标。
  Element Plus 抛弃了字体图标的用法，而直接使用了 svg 。Element Plus 团队自行开发了一套图标，并且保存在@element-plus/icons-vue安装包中。

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  ElementPus 团队就是利用了这个特点封装图标，所以使用elementplus图标就是使用组件。

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

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

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

二、导入

1、手动导入（不推荐）

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

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

• 1、局部导入

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 2、全局注册（还行，但消耗性能）
  在main.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')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

  在组件中使用

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

1
2
3
4
5

  因为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文件

// 直接复制到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,
      	})
  	]
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

  在组件中使用

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

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下载安装对应的图标集
• Icons()表示会自动安装@iconify-json/ep的依赖，设置为true,他就会自动安装iconify 图标。

三、注意

  情景：图标在按钮中使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13

•   运行程序后，你会发现：对于方式一，因为el-button和el-icon都有size属性，所以当同时给两者设定size值时，可能会出现icon比button大的情况，显然不是我们想看到的。而使用方法二可以有效规避这个风险，大家可以根据需求选择哪种方式。
  
  

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