Vue3.0商店后台管理系统项目实战-导航的icon图标

简介: Vue3.0商店后台管理系统项目实战-导航的icon图标

参考资料

Vue3.0官方文档:https://cn.vuejs.org/

Element Plus文档:https://element-plus.gitee.io/zh-CN/

Element Plus 提供了一套常用的图标集合

1:安装

# NPM
$ npm install @element-plus/icons-vue

图片.png

2:在main.js引入

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 store from './store'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app=createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
app.use(store).use(router).use(ElementPlus).mount('#app')

3:基础用法

点击图标进行复制

在这个代码里面粘贴即可

查看效果

自己想要的图标已经放在上面啦

相关文章
|
JavaScript
Vue引入字节跳动图标库
Vue引入字节跳动图标库
541 0
Vue引入字节跳动图标库
|
JavaScript 前端开发
Vue项目实战(09)- svg图标的使用
Vue项目实战(09)- svg图标的使用
358 0
vue3+vite项目中使用svg图标
vue3+vite项目中使用svg图标
1826 0
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
426 1
|
JavaScript 前端开发
iconfont 图标在vue里的使用
iconfont 图标在vue里的使用
853 0
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
Vue3 antdv 如何动态渲染 icons-vue 图标(a-icon 不支持了)
Vue3 antdv 如何动态渲染 icons-vue 图标(a-icon 不支持了)
863 0
|
JavaScript
vsCode编辑器Vue使用el-upload上传组件标签名变成上传图标
vsCode编辑器Vue使用el-upload上传组件标签名变成上传图标
470 0
|
JavaScript 区块链
vue 自定义网页图标 favicon.ico 和 网页标题
vue 自定义网页图标 favicon.ico 和 网页标题
485 1
|
XML JavaScript 前端开发
vue实战——图标,请使用SVG!(含插件vue-svg-icon的使用)
vue实战——图标,请使用SVG!(含插件vue-svg-icon的使用)
1145 1

热门文章

最新文章