• 欢迎光临~

vue3 Element Plus Icon 图标使用

开发技术 开发技术 2022-09-29 次浏览

1. 没有安装 element-plus/icons 的,安装命令如下:

npm install @element-plus/icons-vue

2. main.js 引入(我比较懒,全部引入。) : 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入 路由
import store from './store' // 导入 vuex

import ElementPlus from 'element-plus' // 导入Element Plus
import 'element-plus/theme-chalk/index.css' // 导入Element Plus css

// 导入 icon
import * as ElIconList from '@element-plus/icons-vue'

const app = createApp(App).use(router).use(store).use(ElementPlus)

// 注册icon
for (const name in ElIconList) {
app.component(name, ElIconList[name])
}

app.mount('#app')

使用 eg: 

<el-button icon="Rank" />
 

vue3 Element Plus Icon 图标使用

展示效果:

vue3 Element Plus Icon 图标使用

 

程序员灯塔
转载请注明原文链接:vue3 Element Plus Icon 图标使用
喜欢 (0)