当前位置：首页 > news >正文

unocss+iconify技术在vue项目中使用20000+的图标

news 2025/11/3 23:29:05

安装依赖

npm i unocss @iconify/json

配置依赖

vue.config.js文件

在这里插入图片描述

uno.config.js文件

在这里插入图片描述

main.js文件

在这里插入图片描述

使用

<i class="i-fa:user"></i>
<i class="i-fa:key"></i>

class名是 i- 开头，跟库名:图标名，那都有什么库？什么图标？
在https://icones.js.org/
在这里插入图片描述

找几个看看

在这里插入图片描述

在这里插入图片描述
记得加 i- 哦
i-库名:图标名

效果

看，是异步加载svg的图标
在这里插入图片描述

unocss+iconify技术在vue项目中使用20000+的图标

安装依赖 npm i unocss iconify/json配置依赖 vue.config.js文件 uno.config.js文件 main.js文件使用 <i class"i-fa:user"></i> <i class"i-fa:key"></i>class名是 i- 开头，跟库名:图标名，那都有什么库…...

编程日记 2024/1/20 18:57:11

python 自动化模块 - pyautogui初探

python 自动化模块 - pyautogui 引言一、安装测试二、简单使用三、常用函数总结引言在画图软件中使用pyautogui拖动鼠标，画一个螺旋式的正方形 - (源码在下面) PyAutoGUI允许Python脚本控制鼠标和键盘，以自动化与其他应用程序的交互。API的设计非常简…...

编程日记 2024/1/20 18:54:07

UE5 蓝图编辑美化学习

虚幻引擎中干净整洁蓝图的15个提示_哔哩哔哩_bilibili 1.双击线段成节点。好用，爱用 2.用序列节点好用，爱用 3.用枚举。好用，能避免一些的拼写错误 4.对齐节点两点一水平线 5.节点上下贴节点 （以前不懂，现在经常…...

编程日记 2024/1/20 18:50:04

基于动态顺序表实现通讯录项目

本文中，我们将使用顺序表的结构来完成通讯录的实现。我们都知道，顺序表实际上就是一个数组。而使用顺序表来实现通讯录，其内核是将顺序表中存放的数据类型改为结构体，将联系人的信息存放到结构体中，通过对顺序表的操…...

编程日记 2024/1/20 18:49:03

python使用jupyter记笔记

目录一、安装二、运行jupyter 三、使用四、记笔记 Jupyter Notebook（此前被称为 IPython notebook）是一个交互式笔记本，支持运行 40 多种编程语言。 Jupyter Notebook 的本质是一个 Web 应用程序，便于创建和共享程序文档&a…...

编程日记 2024/1/20 18:46:00

C#封装服务新建服务项目；重构 OnStart 和 OnStop using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Diagnostics; using System.Linq; using System.ServiceProcess; using System.Text; using S…...

编程日记 2024/1/20 18:40:54

手写Vue3源码

Vue3核心源码 B站视频地址：https://www.bilibili.com/video/BV1nW4y147Pd?p2&vd_source36bacfbaa95ea7a433650dab3f7fa0ae Monorepo介绍 Monorepo 是管理项目代码的一种方式，只在一个仓库中管理多个模块/包一个仓库可以维护多个模块，…...

编程日记 2024/1/20 18:34:47

如何无需重复输入FTP信息来安装WordPress主题和插件

WordPress作为一个广受欢迎的内容管理系统，提供了丰富的主题和插件来扩展网站的功能和外观。然而，许多用户在安装这些主题和插件时，经常遇到需要重复输入FTP信息的麻烦。幸运的是，有几种方法可以解决这个问题，让安装过…...

编程日记 2024/1/20 18:33:46

开发安全之：JSON Injection

Overview 在 XXX.php 的第 X 行中，responsemsg() 方法将未经验证的输入写入 JSON。攻击者可以利用此调用将任意元素或属性注入 JSON 实体。 Details JSON injection 会在以下情况中出现： 1. 数据从一个不可信赖的数据源进入程序。 2. 将数据写入到 …...

编程日记 2024/1/20 18:32:45

各种Linux版本安装Docker

文章目录一、Ubuntu 20.04.61. 网卡和DNS配置2. Docker安装二、CentOS Linux 7.91. 网卡和DNS配置2. Docker安装三、Alibaba Cloud Linux 31. DNS配置2. repo说明3. Docker安装四、验证是否安装成功一、Ubuntu 20.04.6 1. 网卡和DNS配置 /etc/netplan 找到 *.yaml 文件 …...

编程日记 2024/1/20 18:30:43

git中合并分支时出现了代码冲突怎么办

目录第一章、Git代码冲突介绍1.1）什么是Git代码冲突①git merge命令介绍②代码冲突原因 1.2）提示代码冲突的两种情况①本地不同分支的文件有差异时：②本地仓库和git远程仓库的文件有差异时： 1.3）解决合并时的代码冲突…...

编程日记 2024/1/20 18:26:40

什么是防火墙？

目录什么是防火墙，为什么需要防火墙？防火墙与交换机、路由器对比防火墙和路由器实现安全控制的区别防火墙的发展史1989年至1994年1995年至2004年2005年至今什么是防火墙，为什么需要防火墙？ “防火墙”一词起源于建筑领域&#x…...

编程日记 2024/1/20 18:25:39

tui.calender日历创建、删除、编辑事件、自定义样式

全是坑🕳！全是坑🕳！全是坑🕳！能不用就不用！ 官方文档：https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/calendar.md 实例的一些方法，比如创建、删除、修改、…...

编程日记 2024/1/20 18:21:36

OpenHarmonyOS-gn与Ninja

GN语法及在鸿蒙的使用 [gnninja学习 0x01]gn和ninja是什么 ohos_sdk/doc/subsys-build-gn-coding-style-and-best-practice.md GN 语言与操作一、gn简介 gn是generate ninja的缩写，它是一个元编译系统（meta-build system）,是ninja的前端&am…...

编程日记 2024/1/20 18:19:34

Docker部署Traefik结合内网穿透远程访问Dashboard界面

文章目录前言1. Docker 部署 Trfɪk2. 本地访问traefik测试3. Linux 安装cpolar4. 配置Traefik公网访问地址5. 公网远程访问Traefik6. 固定Traefik公网地址前言 Trfɪk 是一个云原生的新型的 HTTP 反向代理、负载均衡软件，能轻易的部署微服务。它支持多种后端 (D…...

编程日记 2024/1/20 18:18:33

2024年甘肃省职业院校技能大赛信息安全管理与评估样题二理论题

竞赛需要完成三个阶段的任务，分别完成三个模块，总分共计 1000分。三个模块内容和分值分别是： 1.第一阶段：模块一网络平台搭建与设备安全防护（180 分钟，300 分）。 2.第二阶段：模块二…...

编程日记 2024/1/20 18:16:31

从代码到项目管理：程序员的职业跃迁与PMP认证之路

哈喽，我是eleven,软件工程专业毕业，工作六年多的时间从事过测试岗、研发岗、项目经理岗。一路走来一直按照自己的职业规划向前发展，每一步都成功转型，目前已顺利拿到PMP项目管理资格认证。希望能通过自己的经验给大家带来些许帮助…...

编程日记 2024/1/20 18:12:27

空间形状对结构加法产物的影响

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 有2个点被固定在一个5*5的平面内，在这个平面内还有2个点在随机的运动。最终这4个点是如何分布的？ 1 - - - 5 - - 1 9 - - 1 - 13 - - - 1 1 1 - 1 …...

编程日记 2024/1/20 18:11:26

构建高效外卖系统：技术实践与代码示例

外卖系统在现代社会中扮演着重要的角色，为用户提供了便捷的用餐解决方案。在这篇文章中，我们将探讨构建高效外卖系统的技术实践，同时提供一些基础的代码示例，帮助开发者更好地理解和应用这些技术。 1. 技术栈选择构建外卖系统…...

编程日记 2024/1/20 18:05:20

HCIP-BGP选路实验

一.实验拓扑图二.详细配置 R1 interface GigabitEthernet0/0/0 ip address 12.1.1.1 255.255.255.0interface LoopBack0 ip address 1.1.1.1 255.255.255.0interface LoopBack1 ip address 10.1.1.1 255.255.255.0bgp 1 router-id 1.1.1.1 peer 12.1.1.2 as-number 2ipv4-fa…...

编程日记 2024/1/20 18:02:17

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2025/11/3 14:17:12

什么是EULA和DPA

文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...

编程新知 2025/10/18 7:13:10

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容本期用到的软件：yakit（因为经过之前好多期…...

编程新知 2025/11/2 23:49:00

快刀集(1): 一刀斩断视频片头广告

一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。电影嘛，要沉浸，…...

编程新知 2025/9/3 5:42:53

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全，让Comfyui导出的图像不包含工作流信息，导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo（推荐） 在 save_images 方法中，删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

Vue ③-生命周期 || 脚手架

生命周期思考：什么时候可以发送初始化渲染请求？（越早越好） 什么时候可以开始操作dom？（至少dom得渲染出来） Vue生命周期： 一个Vue实例从创建到销毁的整个过程。生命周期四个…...

编程新知 2025/10/15 0:28:44

文件上传漏洞防御全攻略

要全面防范文件上传漏洞，需构建多层防御体系，结合技术验证、存储隔离与权限控制： 🔒 一、基础防护层前端校验（仅辅助） 通过JavaScript限制文件后缀名（白名单）和大小，提…...

编程新知 2025/8/18 19:05:00

起重机起升机构的安全装置有哪些？

起重机起升机构的安全装置是保障吊装作业安全的关键部件，主要用于防止超载、失控、断绳等危险情况。以下是常见的安全装置及其功能和原理： 一、超载保护装置（核心安全装置） 1. 起重量限制器功能：实时监测起升载荷&a…...

编程新知 2025/7/9 1:14:54

Qwen系列之Qwen3解读：最强开源模型的细节拆解

文章目录 1.1分钟快览2.模型架构2.1.Dense模型2.2.MoE模型 3.预训练阶段3.1.数据3.2.训练3.3.评估 4.后训练阶段S1: 长链思维冷启动S2: 推理强化学习S3: 思考模式融合S4: 通用强化学习 5.全家桶中的小模型训练评估评估数据集评估细节评估效果弱智评估和民间Arena 分析展望如果…...

编程新知 2025/11/1 15:58:50

Qt的学习（二）

1. 创建Hello Word 两种方式，实现helloworld： 1.通过图形化的方式，在界面上创建出一个控件，显示helloworld 2.通过纯代码的方式，通过编写代码，在界面上创建控件， 显示hello world； …...

编程新知 2025/11/3 9:47:34

安装依赖

配置依赖

vue.config.js文件

uno.config.js文件

main.js文件

使用

效果

相关文章：