热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue3!ElementPlus如何像ElementUI一样使用Icon?

Vue3!ElementPlus如何像ElementUI一样使用Icon?-前言Vue3已切换到默认版本,现在新做的项目基本都直接用Vue3了,但是升级到 ElementPlus 

前言

Vue3 已切换到默认版本,现在新做的项目基本都直接用 Vue3 了, 但是升级到 Element Plus 后很多人都感觉 icon 的使用方式不习惯、不好用,今天就跟大家分享一个简单又方便的方法,用熟悉的方法使用 icon。

只需要用到 UnoCSS

UnoCSS 是 antfu 开发的一个原子化 CSS 引擎,这里就不详细说了,大家感兴趣可以去读一下他的文章【重新构想原子化 CSS】。

  • antfu 为 Vue3 生态写了很多优秀的工具,牛逼Plus。

正文开始

以下教程都是只针对 Vite,VueCli 的要自己研究下。

安装依赖

# @iconify-json/ep 是 Element Plus 的图标库
npm i -D unocss @iconify-json/ep

修改 vite.config.ts 配置

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { presetIcons } from 'unocss'
export default defineConfig({
plugins: [
vue(),
// 添加以下配置
Unocss({
presets: [
presetIcons({
scale: 1.2,
warn: true
}),
],
// 以下配置是为了可以直接使用标签
variants: [
{
match: (s) => {
if (s.startsWith('')) {
return {
matcher: s,
selector: (s) => {
return s.startsWith('.') ? `${s.slice(1)},${s}` : s
},
}
}
},
},
],
})
]
})

修改 main.ts

// 在 main.ts 里添加以下代码
import 'uno.css'

可以开始写代码

  • 使用方法:前缀 i-ep- + 图标名, i-ep-lock

使用注意

UnoCSS 是关键词匹配按需生成的,所以要注意以下使用方法





如果你的 icon 变量是从接口获取的,要修改 UnoCSS 的配置

Unocss({
// 添加以下配置, safelist 是预生成 i-ep-lock 的样式不管代码有没有使用这个图标
safelist: ['i-ep-lock', 'i-ep-menu']
})

快速把整个图标库载入

import epIcons from '@iconify-json/ep'
Unocss({
// 修改成以下配置
safelist: [
...Object.keys(epIcons.icons.icons).map(name => `i-${epIcons.icons.prefix}-${name}`),
],
})

使用任意的图标集

?Icônes 可以在这个找自己喜欢的图标集,我们挑 ant design 来说一下。

# 安装依赖
npm i @iconify-json/ant-design -D

完美配合

最后

大家开始愉快的写代码吧。更多的使用配置大家可以去看一下文档,也参考一下我写的一个后台模板里的配置MDAdmin(基于 Vue3 + Ts + ElementPlus)




推荐阅读
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
  • 为了在Hadoop 2.7.2中实现对Snappy压缩和解压功能的原生支持,本文详细介绍了如何重新编译Hadoop源代码,并优化其Native编译过程。通过这一优化,可以显著提升数据处理的效率和性能。此外,还探讨了编译过程中可能遇到的问题及其解决方案,为用户提供了一套完整的操作指南。 ... [详细]
  • Squaretest:自动生成功能测试代码的高效插件
    本文将介绍一款名为Squaretest的高效插件,该工具能够自动生成功能测试代码。使用这款插件的主要原因是公司近期加强了代码质量的管控,对各项目进行了严格的单元测试评估。Squaretest不仅提高了测试代码的生成效率,还显著提升了代码的质量和可靠性。 ... [详细]
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • Ext JS MVC系列一:环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架,并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
  • 如何在Linux服务器上配置MySQL和Tomcat的开机自动启动
    在Linux服务器上部署Web项目时,通常需要确保MySQL和Tomcat服务能够随系统启动而自动运行。本文将详细介绍如何在Linux环境中配置MySQL和Tomcat的开机自启动,以确保服务的稳定性和可靠性。通过合理的配置,可以有效避免因服务未启动而导致的项目故障。 ... [详细]
  • 本指南详细介绍了如何利用华为云对象存储服务构建视频点播(VoD)平台。通过结合开源技术如Ceph、WordPress、PHP和Nginx,用户可以高效地实现数据存储、内容管理和网站搭建。主要内容涵盖华为云对象存储系统的配置步骤、性能优化及安全设置,为开发者提供全面的技术支持。 ... [详细]
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 解决lib-flexible安装过程中遇到的错误问题
    在安装 lib-flexible 时,遇到了 `saveError ENOENT: No such file or directory` 错误,具体表现为无法打开 `E:\Github\SDIO\package.json` 文件。解决此问题的关键在于确保项目根目录下存在 `package.json` 文件,并且在正确的项目路径中执行安装命令。建议先检查项目结构,确认文件是否存在,然后再尝试重新安装依赖。 ... [详细]
  • 在不使用Webpack和单文件组件的情况下,构建Vue组件系统的可行性探讨 ... [详细]
  • 在 Vue.js 中实现网络请求的方法与最佳实践包括使用 `vue-resource` 插件。首先,通过命令 `npm install vue-resource --save` 安装该插件,确保添加 `--save` 参数以将依赖项记录到 `package.json` 文件中。此外,推荐使用 `axios` 作为替代方案,因为它提供了更强大的功能和更好的性能。在项目中引入并配置 `axios`,可以实现更高效、灵活的网络请求管理。 ... [详细]
author-avatar
星宿1970_219
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有