vue3中使用element ui plus icon,完整步骤

vue3中使用element ui plus icon,完整步骤_第1张图片

一:选择一个你喜欢的包管理器

NPM

$ npm install @element-plus/icons-vue

Yarn

$ yarn add @element-plus/icons-vue

pnpm

$ pnpm install @element-plus/icons-vue

二:在mainjs中引入

import * as ElementPlusIconsVue from ‘@element-plus/icons-vue’

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

三:选择需要的icon,在相应页面进行引入

vue3中使用element ui plus icon,完整步骤_第2张图片
vue3中使用element ui plus icon,完整步骤_第3张图片

vue3中使用element ui plus icon,完整步骤_第4张图片!
vue3中使用element ui plus icon,完整步骤_第5张图片

     //设置图标样
      .loginIcon {
        height: 80px;
        width: 75px;
        background-color: #284062;
        font-size: 55px;
        padding-top: 10px;
        box-sizing: border-box;
        color: #cff3f7;
      }

你可能感兴趣的:(element,ui,vue.js,javascript)