Vue3 icon使用

icon使用：https://cn.element-plus.org/zh-CN/component/icon.html
1.安装icon

2.配置main.js

点击查看代码

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import App from './App.vue'
import router from './router'

import '@/assets/global.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'


const app = createApp(App)

app.use(router)
app.use(ElementPlus, { locale: zhCn })
app.mount('#app')
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

3.使用

点击查看代码

<div style="margin: 30px">
      <el-icon :size="20" :color="color">
        <Edit />
      </el-icon>

      <span style="margin-left: 30px">
        <el-icon :size="20" color="#666" style="top: 4px">
          <View />
        </el-icon>100
      </span>

      <el-button type="danger" :icon="Delete" circle />

      <el-input
          v-model="data.b"
          style="width: 240px"
          placeholder="Type something"
          :prefix-icon="Search"
      />
    </div>

import {Delete, Search} from "@element-plus/icons-vue";