关于前端:vue3-中-elementplus-图标的全局注册便捷使用

element-plus 的 icon 有一个比拟大的变动就是所有的图标以组件的格局渲染，这样的话咱们在应用的时候就须要用一个注册一个，尽管节约了性能，然而理论利用中会带来很多麻烦。所以我抉择就义这点性能换去不便

1：装置 ”@element-plus/icons”，留神 element-plus 的图标库须要独自装置
npm install @element-plus/icons

2：入口文件（main.ts）中援用并注册

import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入所有图标
import * as Icons from '@element-plus/icons'
const app = createApp(App)
// 循环注册所有图标
for(const name in Icons){
    //name 为 icon 名称，也是组件名称。应用时：<Edit />，// 也能够按需减少前缀或者后缀
    // eg: app.component(`eurake-name-${name}`,(Icons as any)[name])
    // 应用时：<eurake-name-Edit />
    // 当然你也能够写一个办法把首字母大写的图标名称改成小写等你想要的任意格局
  app.component(name,(Icons as any)[name])
}
//
app.use(ElementPlus).mount('#app')

3：组件中应用

<template>
  <Edit />
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>

4：款式
能够设置全局款式, 默认宽高为 1em * 1em ; 色彩等能够用 fill

svg{
width:1em;
height:1em;
fill:#ddd;// 色彩
}