vue3使用elementplus图标

在实际项目中,我们常常需要用到图标,所以本文主要来介绍一下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图标有两种方法:

  1. 因为图标也是组件,所以导入后可以直接使用(不推荐)
  2. 与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

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

相关推荐
小牛itbull6 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i14 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_17 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
GIS瞧葩菜26 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
计算机毕设指导61 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
前端拾光者2 小时前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
木子02043 小时前
前端VUE项目启动方式
前端·javascript·vue.js
endingCode3 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript