项目场景：

vue3项目中。
element-push版本：

"element-plus": "^2.2.2"

当前版本的icon还没有默认在组件中，需要另外安装才能使用图标。

问题描述

虽然在vue3项目中引入了element-plus，但是不能使用icon图标，因为element-plus组件库目前没有包含icon组件。

解决方案：

安装icons-vue

# 选择一个你喜欢的包管理器
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

在main.ts中注册图标组件：

// main.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

相当于现在一个图标是一个组件，而不是原来的使用class来定义组件了，所以循环遍历ElementPlusIconsVue，将每个图标都作为组件注册到项目中。

当然如果你并不需要引入全部的图标，可以在需要的地方引入，而不是在main.ts中全局引入：

import {Document,Menu as IconMenu,Location,Setting,
} from '@element-plus/icons-vue'

组件中使用（注意大小写）：

<el-icon><location /></el-icon>

Vue3使用ElementPlus的图标icon相关推荐

vue3+ts+element-plus动态图标生成方式
1.安装 $ yarn add @element-plus/icons # 或者 $ npm install @element-plus/icons 2.使用全局组件的方式引入 //main.ts i ...
vue3之 element-plus的循环图标
vue3之 element-plus的循环图标 Vue2中使用Element UI的图标渲染是通过 <i class="el-icon-plus"></i> ...
Vue3 Element Plus 动态图标
Vue3 Element Plus 动态图标 Element Plus 中的图标以组件的形式来使用,而在基于Vue 2.x的Element UI中图标是字符串的形式,这样就导致过去的一些使用习惯不得不 ...
vue3.0封装一个图标选择组件
基于vite2.0+vue3.0项目写了一个图标选择器,项目引入对应的css字体文件就行,支持模糊搜索项目的文件目录 1.IconPicker.vue <template><d ...
《vue3+ts+element-plus 后台管理系统系列》之微前端版本
系列文章目录 <vue3+ts+element-plus 后台管理系统系列一>之简介 <vue3+ts+element-plus 后台管理系统系列二>之布局 <vue3+ ...
Android自定义app图标,自定义app图标(Icon) - Cordova中文网
自定义图标(Icon) 这节将介绍如何为不同的平台配置一个app的图标.对启动画面(splash screen)的支持已经被移动到Cordova自己的插件中了.配置选项可以在Splashscreen插 ...
jQuery Mobile中图标icon样式大全ui-icon-*
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有class选项 jQuery Mobile中图标icon样式大全 //ui-icon-action 动作 (一般用于页面跳转切换) ...
使用C#从图片文件生成图标ICON文件（附源文件）
使用C#从图片文件生成图标ICON文件(附源文件) 看到网上有一些网站做图标转换工具,挺好的,所以研究了一下在C#中是如何实现的.其实很简单几行代码就可以搞定. 主要是使用System.Drawing ...
Android Studio 更换/设置App应用图标Icon
Android Studio 更换/设置App应用图标Icon 刚开始接触Android Studio,用C++.Java编程做一个小的App,心血来潮想要换掉默认的安卓应用图标和应用名称,在经历一番 ...

Vue3使用ElementPlus的图标icon

项目场景：

问题描述

解决方案：

Vue3使用ElementPlus的图标icon相关推荐

最新文章

热门文章