Element Plus

Element Plus官网 https://www.yuque.com/wl001/oqbgmh/vz0wio#PeCY8

1、element-plus SVG Icon 注册方法

安装element-plus SVG图标库

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

main.js全局使用

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElIcons from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
var app = createApp(App);
for(const name in ElIcons){
    /*
       * 以elIcon为前缀的命名规则，是为了适配已经使用属性名添加图标的内置组件，
       * 例如：<el-button icon="el-icon-refresh"></el-button>
       * 单独name app.component(name,ElIcons[name]); 案例<edit></edit>就不需要在单独引入了
       * 例如：<el-button icon="refresh"></el-button>
       */
    app.component('elIcon'+ name,ElIcons[name]);
}
/* ElementPlus默认是英语 需要选择默认语言 */
app.use(ElementPlus,{size: 'mini',locale: zhCn});
app.mount('#app');

案例

<template>
       <!-- main.js全局引入svg icon -->
    <el-button icon="el-icon-refresh"></el-button>
    <div>
        <!-- import单独引入svg icon -->
        <el-icon :size="size" :color="color">
            <edit></edit>
        </el-icon>
        <edit></edit>
          <!-- main.js全局引入svg icon -->
          <el-icon-edit></el-icon-edit>    
    </div>
</template>
<script>
    import  { Edit } from  '@element-plus/icons-vue'
    export default {
        name: "firstPage",
        components:{
            Edit
        },
        setup(){
            return{
            }
        }
    }
</script>