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

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

news 2026/4/1 3:31:07

安装依赖

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

CentOS部署PHP项目完整步骤

CentOS 7.9 部署 PHP 7.4 MySQL 5.7.44 完整步骤由于 CentOS 7 已于 2024 年 6 月 30 日停止官方维护，原有的 yum 源已不可用，因此必须首先更换为阿里云镜像源才能正常安装软件。一、系统环境准备 1.1 更换阿里云 YUM 源 # 1. 备份原有源 mv /etc/yum…...

编程新知 2026/4/1 3:02:47

AMD Ryzen硬件调试指南：5分钟掌握SMUDebugTool核心功能

AMD Ryzen硬件调试指南：5分钟掌握SMUDebugTool核心功能【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://g…...

编程新知 2026/4/1 0:32:05

使用Papanastasiou正交模型求解‘宾汉姆浆液在5mm开度裂隙中，注浆压力1MPa、塑...

使用Papanastasiou正交模型求解宾汉姆浆液单一裂隙注浆扩散范围裂隙开度5mm，注浆管半径2.5cm，注浆压力1MPa 塑性粘度6PaS，屈服应力2Pa COMSOL注浆打开COMSOL新建一个流体模型，先别急着点确定——宾汉姆流体这种带屈服应力的家伙&…...

编程新知 2026/4/1 0:23:58

汇川小型机 H5U编写程序设备采用回转hu小型机编写程序不含的硬件配置有ECT的总线

汇川小型机 H5U编写程序设备采用回转hu小型机编写程序不含的硬件配置有ECT的总线，包括汇川660系列伺服驱动器以及Io模块。设备程序分段明确采用梯形图编写更加方便，直观，易懂各个伺服轴密切配合，实现收放卷pid调节，以…...

编程新知 2026/3/31 23:35:00

新手福音：在快马用ai生成你的第一个notepad编程入门项目

作为一个刚接触编程的新手，我完全理解那种面对空白编辑器时的迷茫感。还记得第一次想用Notepad写代码时，光是下载安装就折腾了半天。今天分享一个超实用的方法，用InsCode(快马)平台就能一键生成完整的入门指南，把下载、安装、写第…...

编程新知 2026/3/31 22:20:01

Ubuntu系统优化下的LiuJuan20260223Zimage高性能部署

Ubuntu系统优化下的LiuJuan20260223Zimage高性能部署本文基于Ubuntu 22.04 LTS系统测试，适用于NVIDIA GPU环境 1. 环境准备与系统优化在开始部署LiuJuan20260223Zimage之前，我们先对Ubuntu系统进行一些基础优化，这些调整能让后续的模型运行…...

编程新知 2026/3/31 21:55:31

4步解决RetroArch缩略图显示异常，恢复游戏库视觉体验

4步解决RetroArch缩略图显示异常，恢复游戏库视觉体验【免费下载链接】RetroArch Cross-platform, sophisticated frontend for the libretro API. Licensed GPLv3. 项目地址: https://gitcode.com/GitHub_Trending/re/RetroArch 在RetroArch的使用过程中&am…...

编程新知 2026/3/31 21:37:04

从无人机到扫地机器人：拆解VIO技术如何成为智能设备的‘隐形大脑’

从无人机到扫地机器人：拆解VIO技术如何成为智能设备的‘隐形大脑’ 当科沃斯T20扫地机器人在复杂家居环境中精准避开宠物食盆时，当大疆Mavic 3无人机在峡谷间自主返航时，背后都隐藏着一项关键技术——视觉惯性里程计（VIO&#xff…...

编程新知 2026/3/31 20:32:00

C++ ONNX Runtime推理踩坑记：为什么我的全局Session一Run就报ORT_RUNTIME_EXCEPTION？

C ONNX Runtime推理异常解析：全局Session与Env生命周期的陷阱在C项目中使用ONNX Runtime进行模型推理时，许多开发者都遇到过这样一个令人困惑的场景：明明代码逻辑看起来完全正确，却在调用Session.Run()时突然抛出ORT_RUNTIME_EXC…...

编程新知 2026/3/31 20:21:51

Windows 10平台Android子系统技术实现与跨平台应用实践

Windows 10平台Android子系统技术实现与跨平台应用实践【免费下载链接】WSA-Windows-10 This is a backport of Windows Subsystem for Android to Windows 10. 项目地址: https://gitcode.com/gh_mirrors/ws/WSA-Windows-10 Windows Subsystem for Android&#xff0…...

编程新知 2026/3/31 20:11:48

安装依赖

配置依赖

vue.config.js文件

uno.config.js文件

main.js文件

使用

效果

相关文章：