vue 使用element-plus 图标引入

vue 使用element-plus 图标引入

在Vue中使用Element Plus图标，首先确保已经安装了Element Plus。如果未安装，可以通过以下命令安装：

npm install element-plus --save
# 或者
yarn add element-plus

1.局部引入

<template>
   <div  class="icon   >
            <el-icon :size="size" :color="color">
              <Setting />
            </el-icon> 
            <el-icon :size="size" :color="color">
              <Document />
            </el-icon>  
        </div> 
</template>
/**
局部引入 在当前也面下 引入使用的图标
**/ 
<script>
 import {Setting, Document } from '@element-plus/icons-vue'
</script>

2.全局引入
在 页面中直接使用 图标

<template>
   <div  class="icon   >
            <el-icon :size="size" :color="color">
              <Setting />
            </el-icon> 
            <el-icon :size="size" :color="color">
              <Document />
            </el-icon>  
        </div> 
</template>

/**
在mian.ts 中
**/
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app =  createApp({ 
  render: () => h(App),
}) 
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}