ElementPlus 图标

       https://element-plus.org/zh-CN/component/icon.html#icon-collection

代码

demo\src\main.js
    import { createApp } from 'vue'

    //整体导入 ElementPlus 组件库
    import ElementPlus from 'element-plus' //导入 ElementPlus 组件库的所有模块和功能 
    import 'element-plus/dist/index.css' //导入 ElementPlus 组件库所需的全局 CSS 样式
    import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入 ElementPlus 组件库中的所有图标

    import App from './App.vue'

    const app = createApp(App)

    //注册 ElementPlus 组件库中的所有图标到全局 Vue 应用中
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }

    app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中
    app.mount('#app')

demo\src\App.vue
    <script setup>

    </script>

    <template>
        
        <h3>图标</h3>
        <el-icon><Plus /></el-icon>
        <el-icon><Edit /></el-icon>
        <el-icon><Delete /></el-icon>
        <el-icon class="is-loading"><Loading /></el-icon>

        <hr>
        <h3>属性</h3>
        <el-icon size="30" color="red"><Search /></el-icon>

        <hr>
        <h3>按钮</h3>
        <el-button type="primary">
            <el-icon><Search /></el-icon>
            <span> 搜索 </span>
        </el-button>

        <el-button type="primary">
            <el-icon><Search /></el-icon>
        </el-button>

        <el-button type="primary" circle>
            <el-icon><Search /></el-icon>
        </el-button>

        <hr>
        <h3>按钮组</h3>
        <el-button-group>
            <el-button type="primary">
                <el-icon><Plus /></el-icon>
            </el-button>

            <el-button type="primary">
                <el-icon><Edit /></el-icon>
            </el-button>

            <el-button type="primary">
                <el-icon><Delete /></el-icon>
            </el-button>
        </el-button-group>

    </template>

    <style scoped>
    
    </style>