❤ vue3 使用ElementPlus

承接自上一篇文章
VUE3 项目具体配置（二）

① 使用 ElementPlus Icon 图标

官网地址：
https://element-plus.org/zh-CN/component/icon.html

1、安装

yarn add @element-plus/icons-vue

安装成功以后：

2、注册所有图标

从 @element-plus/icons-vue 中导入所有图标并进行全局注册

main.ts 配置：

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

3、 直接使用 SVG 图标

 <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
    <Edit />
  </div>

4、 动态使用 SVG 图标

普通使用:

<el-icon><Menu/> </el-icon>


动态使用:
<el-icon>
 	<component class="icons" :is="val.iconclass"></component>
</el-icon>