21.vue3加载Element-plus的字体图标

Element-plus不仅仅是提供了各种组件，同时还提供了一整套的字体图标方便开发者使用

安装icons字体图标

npm install @element-plus/icons-vue

全局注册

在项目根目录下，创建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);
        }
    },
};

引入文件

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

import elementIcon from "./plugins/icons";
app.use(elementIcon)

使用方式

接下来就可以直接在组件中引入使用了

<el-icon class="expand" color="#409EFC" :size="30">
    <expand />
</el-icon>