Vue知识点-ElementPlus-02图标

小大宇2026-10-30 8:57

javascript 复制代码

//src/main.ts
import {createApp} from 'vue'
import App from './App.vue'
//引入pinia
import {createPinia} from "pinia"

//引入EP
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//导入所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

let app = createApp(App)
//创建pinia
const pinia = createPinia()
//注册所有图标组件
for(const [key, component] of Object.entries(ElementPlusIconsVue)){
    app.component(key, component);
}
//使用pinia
app.use(pinia)
app.use(ElementPlus)
app.mount("#app")

html 复制代码

<template>
  <h3>图标el-icon</h3>
  <!--
  如果你需要设置图标的颜色和大小，可以在外面套一个 el-icon 标签，
  使用color和size方便的设置属性，size单位px
  -->
  <div style="display:flex;gap:20px;align-items:center;">
    <el-icon><Plus/></el-icon>
    <el-icon><Delete/></el-icon>
    <el-icon><Edit/></el-icon>
    <el-icon><Search/></el-icon>
    <el-icon><Loading/></el-icon>
    <!-- 自动转 -->
    <el-icon class="is-loading"><Loading/></el-icon>
  </div>

  <h3>图标的尺寸size和颜色属性color</h3>
  <!-- size属性的单位是px -->
  <el-icon size="50" color="red"><Search/></el-icon><br><br>

  <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>

  <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>
<script lang='ts' setup name="App"></script>