element plus全局导入图标和全局配置

1. 图标安装

npm install @element-plus/icons-vue

2. 全局导入

// main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ELIcons from '@element-plus/icons-vue'

const app = createApp(App);

// 全局导入plus图标
for (let iconName in ELIcons) {
    
    
	app.component(iconName, ELIcons[iconName])
}

// size：组件全局默认尺寸  locale：语言  zIndex：弹出组件的层级
app.use(ElementPlus, {
    
     size: 'small', locale: zhCn, zIndex: 800 });  

3.基础使用

<!-- 使用 el-icon 标签来包裹 SVG 图标 -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <edit />
    </el-icon>
    <!-- 也可以直接使用图标标签，无需父标签包裹 -->
    <edit />
  </div>
</template>

4 其他用法官网都写到很清楚

element plus官网 => 图标