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- 开头,跟库名:图标名,那都有什么库?什么图标?
在https://icones.js.org/
在这里插入图片描述

找几个看看

在这里插入图片描述

在这里插入图片描述

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

效果

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/242188.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jvm相关知识(面试高级必备)

类的实例化顺序 先静态、先父后子 先静态&#xff1a;父静态>子静态 优先级&#xff1a;父类>子类 静态代码块>非静态代码块>构造函数 一个类的实例化过程&#xff1a; ①&#xff0e;父类的static代码块&#xff0c;当前类的static; ②&#xff0e;顺序执行…

C++大学教程(第九版)5.25去除break语句 5.27去除cintinue语句

5.25题目 (去除break和continue)break和continue 语句遭到质疑的原因是它们的非结构化性。实际上,break和continue 语句总能用结构化的语句取代。请详述如何从程序的一条循环语中去除break语句&#xff0c;并用某种结构化的手段替代。提示:break 语句用于在循环体内离开一个循…

【高等数学之不定积分】

一、什么是不定积分? 不定积分&#xff0c;我们从英文层面来浅显的了解一下它的意义。 1.1、基本概念 从上面我们可以看出&#xff0c;导数和积分是互逆运算。 二、不定积分运算法则 三、常用积分公式 四、第一类换元积分法 4.1、常用凑微分公式 4.2、小练习 五、第二类…

【C语言】- 设置控制台标题、编码、文字颜色、大小和字体

【C语言】- 设置控制台标题、编码、文字颜色、大小和字体 文章目录 【C语言】- 设置控制台标题、编码、文字颜色、大小和字体1 - 设置控制台标题2 - 设置控制台编码3 - 设置控制台字体和大小参考链接 1 - 设置控制台标题 因为要用到 Windows API&#xff0c;所以需要包含头文件…

LLM:Scaling Laws for Neural Language Models (上)

论文&#xff1a;https://arxiv.org/pdf/2001.08361.pdf 发表&#xff1a;2020 摘要1&#xff1a;损失与模型大小、数据集大小以及训练所用计算量成比例&#xff0c;其中一些趋势跨越了七个量级以上。 2&#xff1a;网络宽度或深度等其他架构细节在很大范围内影响较小。3&…

JVM篇--垃圾回收高频面试题

JVM垃圾回收 1 简单说下Java垃圾回收机制&#xff1f; 首先在java运行过程中&#xff0c;其实程序员并不需要去显示的调用程序来释放对象的内存&#xff0c;而是由虚拟机来完成的&#xff0c;具体来看是在jvm中有个垃圾回收线程&#xff0c;这个线程是个守护线程&#xff0c;…

揭秘AI换脸技术:从原理到应用

随着人工智能技术的不断发展&#xff0c;AI换脸技术逐渐成为人们关注的焦点。这项神奇的技术能够将一张图像或视频中的人脸替换成另一张人脸&#xff0c;让人不禁惊叹科技的神奇。那么&#xff0c;AI换脸技术究竟是如何实现的呢&#xff1f;本文将带您深入了解AI换脸技术的原理…

【JavaEE】网络原理:网络中的一些基本概念

目录 1. 网络通信基础 1.1 IP地址 1.2 端口号 1.3 认识协议 1.4 五元组 1.5 协议分层 什么是协议分层 分层的作用 OSI七层模型 TCP/IP五层&#xff08;或四层&#xff09;模型 网络设备所在分层 网络分层对应 封装和分用 1. 网络通信基础 1.1 IP地址 概念:IP地址…

Qt 状态机框架:The State Machine Framework (二)

传送门: Qt 状态机框架:The State Machine Framework (一) Qt 状态机框架:The State Machine Framework (二) 1、利用并行态避免态的组合爆炸 假设您想在单个状态机中对汽车的一组互斥属性进行建模。假设我们感兴趣的属性是干净与肮脏,以及移动与不移动。需要四个相互排斥的…

手把手教你如何快速定位bug,如何编写测试用例,快来观摩......

手把手教你如何快速定位bug,如何编写测试用例,快来观摩......手把手教你如何快速定位bug,如何编写测试用例,快来观摩......作为一名测试人员如果连常见的系统问题都不知道如何分析&#xff0c;频繁将前端人员问题指派给后端人员&#xff0c;后端人员问题指派给前端人员&#xf…

cetos7搭建部署k8s 版本1.28

主机分配 内存最少是4G cpu个数最少两个 IP内存CPU主机名192.168.231.12044K1 192.168.231.12144K2192.168.231.12244K3 关闭防火墙 systemctl stop firewalled 关闭swap vim /etc/fstab 设置主机名称 hostnameset 安装docker 三个主机 初始化集群 在mas…

【unity学习笔记】语音驱动blendershape

1.导入插件 https://assetstore.unity.com/packages/tools/animation/salsa-lipsync-suite-148442 1.选择小人&#xff0c;点击添加组件 分别加入组件&#xff1a; SALSA EmoteR Eyes Queue Processor&#xff08;必须加此脚本&#xff09;&#xff1a;控制前三个组件的脚本。…

ASP.NET Core SingleR:初次体验和简单项目搭建

文章目录 前言应用场景SignalR 网站长什么样&#xff1f;第一个ASP.NET core SignalR程序确定SignalR版本新建MVC项目添加unpkg管理器添加客户端添加ChatHub文件添加SignalR服务添加网页运行测试浏览器Websocket调试type1type6Type为其它时 总结 前言 平常的网页通讯都是基于H…

Python武器库开发-武器库篇之Fofa-API使用(四十六)

Python武器库开发-武器库篇之Fofa-API使用(四十六) FOFA&#xff08;FOcus Observation of Futures Assets&#xff09;是一款专业的网络资产搜索引擎&#xff0c;旨在帮助企业发现和评估网络上的潜在安全风险。FOFA的基本原理是通过搜索引擎的方式&#xff0c;按照关键词对互…

【51单片机Keil+Proteus8.9】温室盆栽灌溉系统

实验五 实验名称 温室盆栽灌溉系统 软件设计&#xff1a; 1. 定义对应的引脚和端口的别名。 2. 编写延时函数&#xff0c;用于控制程序的执行速度。 3. 编写LCD控制函数&#xff0c;包括发送命令和发送数据两种操作。 4. 编写显示函数&#xff0c;用于在LCD上显示字符串…

PHP+MySQL组合开发:微信小程序万能建站源码系统 附带完整的搭建教程

随着移动互联网的快速发展&#xff0c;微信小程序已成为企业进行移动营销的重要工具。然而&#xff0c;对于许多中小企业和个人开发者来说&#xff0c;开发一个功能完善、用户体验良好的小程序是一项复杂的任务。罗峰给大家分享一款微信小程序万能建站源码系统。该系统采用PHPM…

小白准备蓝桥杯之旅(c/c++b组)

前言&#xff1a;省赛获奖比例高达百分之60,只要比一半的人努力&#xff0c;你就能大概率获奖。 寒假做的3件事 1.稳基础 熟练掌握基础语法部分&#xff0c;c比c多个stl库优势&#xff0c;c语言的同学需要会实现c中stl库部分 2.刷真题 大概比赛前30天&#xff0c;坚持每天做…

ros2 基础教程-使用ROS 2进行相机标定

ROS 2进行相机标定&#xff08;Camera Calibration&#xff09; 相机&#xff08;摄像头&#xff09;是一种非常精密的光学仪器&#xff0c;对外界环境的感知非常敏感。由于摄像头内部和外部的一些原因&#xff0c;摄像头采集的图像常常会发生一定的畸变。如果直接将采集到的图…

JAVA和C++ SECS/GEM300开发和概念

编译SECS示例程序 1. 示例程序使用默认路径&#xff1a; D:\SECS 稳定版\SECS Debug\ 2. 该操作分为俩步 ① 将C#的Secs库编译成设备相同Net版本。 如.net3.5、4.0、4.5等等 ② 编译金南瓜SECS demo程序 编译C#的SecsEquip.dll 1. 找到SecsEquip项目 项目文件 使用Visua…

电商平台spu和sku的完整设计

一、关于数据库表的设计 1、商品属性表 比如一个衣服有颜色、尺码、款式这个叫属性表 -- ------------------------ -- 商品属性表 -- ------------------------ DROP TABLE IF EXISTS attribute; CREATE TABLE attribute (id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT CO…