vue3使用elementplus图标方式

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

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

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

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

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

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

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

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

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