12.vue3加载element-plus字体图标

1、element-plus字体图标

其它所有组件都是直接复制代码到项目就可以使用的，但字体图标需要额外处理。

2、安装icons字体图标

npm install @element-plus/icons-vue

3、全局注册所有图标

在src目录下，创建plugins文件夹，在文件夹下创建icons.js文件

import * as components from '@element-plus/icons-vue'
export default {
    install: (app) => {
        for (const key in components) {
            const componentConfig = components[key];
            app.component(componentConfig.name, componentConfig);
        }
    }
}

4、在main.js中引入icons.js文件

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import elementIcons from './plugins/icons'
createApp(App).use(store).use(router).use(elementIcons).mount('#app')

5、使用字体图标

<template>
  <div class="home">
    <el-icon :size="60" color="green"><Apple /></el-icon>
  </div>
</template>
<script>
export default {
  name: 'HomeView',
}
</script>

效果如下：