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-inputv-model="data.b"style="width: 240px"placeholder="Type something":prefix-icon="Search"/></div>import {Delete, Search} from "@element-plus/icons-vue";