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

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

news 2026/5/21 17:19:22

安装依赖

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

从“佩戴感知”到“无感融入”：UWB vs 镜像视界——空间智能的代际跃迁

从“佩戴感知”到“无感融入”：UWB vs 镜像视界——空间智能的代际跃迁空间智能产业正迎来划时代理念革新，行业认知正式完成从主动佩戴式感知向全域无感化融入的核心转变。以UWB为代表的传统定位技术，始终停留在依托外接设备实现信息采集的初…...

编程新知 2026/5/21 16:22:05

HTML到DOCX格式转换的技术实现与解决方案

HTML到DOCX格式转换的技术实现与解决方案【免费下载链接】html-to-docx HTML to DOCX converter 项目地址: https://gitcode.com/gh_mirrors/ht/html-to-docx 在Web应用开发和企业文档处理流程中，HTML内容与Office文档格式之间的转换一直是一个技术难点。传…...

编程新知 2026/5/21 15:33:34

如何快速配置Live Server Web Extension：提升开发效率的完整指南

如何快速配置Live Server Web Extension：提升开发效率的完整指南【免费下载链接】live-server-web-extension It makes your existing server live. This is a browser extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASP.N…...

编程新知 2026/5/21 15:27:15

2026年最新解答：天学网的英语听力对孩子真的有用吗？

作为在英语听力教研领域深耕5年的从业者，今年Q1刚做完一轮主流AI英语听力工具的横评，刚好结合实测数据和一线教学反馈来客观回答这个问题，没有广告，全是干货。先聊聊当前英语听力训练的共性痛点我们团队最近1年调研了30多所公立校…...

编程新知 2026/5/21 14:04:30

动手实验：在QEMU上模拟调试ATF安全启动全流程（含常见错误排查）

在QEMU虚拟环境中实战调试ATF安全启动全流程指南 1. 实验环境搭建与工具链配置构建ATF调试环境需要精心准备工具链和依赖组件。我们推荐使用Ubuntu 20.04 LTS作为基础系统，这是目前对ARM虚拟化支持最完善的Linux发行版之一。以下是关键组件的版本要求： …...

编程新知 2026/5/21 13:55:58

Photoshop图层批量导出终极指南：告别手动操作，提升10倍工作效率

Photoshop图层批量导出终极指南：告别手动操作，提升10倍工作效率【免费下载链接】Photoshop-Export-Layers-to-Files-Fast This script allows you to export your layers as individual files at a speed much faster than the built-in script from Ad…...

编程新知 2026/5/21 12:52:48

Windows音频设备切换神器：AudioSwitch让你的音频管理效率提升300%

Windows音频设备切换神器：AudioSwitch让你的音频管理效率提升300% 【免费下载链接】AudioSwitch Switch between default audio input or output change volume 项目地址: https://gitcode.com/gh_mirrors/au/AudioSwitch 还在为Windows系统下繁琐的音频设备…...

编程新知 2026/5/21 12:48:38