021 Vue加载Element-plus的字体图标

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

 

 

安装icons字体图标

npm install @element-plus/icons-vue

 

全局注册

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

　plugins 代表插件的意思

 

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>

 

 注意script中自动出现的代码我们给他注释掉

可以看到出现了：

 还可以设置大小、颜色

要用 : size设置大小  color设置颜色