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的图标
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据结构之dict类

数据结构之dict类

dict类 dict 是字典类。什么是字典&#xff08;Dictionary&#xff09;呢&#xff1f;就是一个可以通过索引找到对象的数据类型。在Python 的dict类里&#xff0c;索引就是“键”&#xff0c;对象也叫“值”&#xff0c;二者合起来就叫“键值对”。每个“键值对”之间用逗号&a…
阅读更多...
“深入理解 Docker 和 Nacos 的单个部署与集成部署“

“深入理解 Docker 和 Nacos 的单个部署与集成部署“

目录 引言&#xff1a;Docker Nacos 单个部署1.1 什么是 Docker&#xff1f;Docker 的概念和工作原理Docker 为什么受到广泛应用和认可 1.2 什么是 Nacos&#xff1f;Nacos 的核心功能和特点Nacos 在微服务架构中的作用 1.3 Docker 单个部署 Nacos Docker Nacos 集成部署总结&a…
阅读更多...
【从零开始学习Redis | 第七篇】利用Redis构造全局唯一ID（含其他构造方法）

【从零开始学习Redis | 第七篇】利用Redis构造全局唯一ID（含其他构造方法）

目录 前言&#xff1a; 什么是全局唯一ID&#xff1f; 尝试构造全局唯一ID&#xff1a; 其他构造全局唯一ID的方法 1.基于数据库自增构造全局唯一ID&#xff1a; 2.基于UUID构造全局唯一ID&#xff1a; 3.基于雪花算法构造全局唯一ID&#xff1a; 总结&#xff1a; 前…
阅读更多...
leetcode 013二维区域和检索---矩阵不可变

leetcode 013二维区域和检索---矩阵不可变

给定一个二维矩阵 matrix&#xff0c;以下类型的多个请求&#xff1a; 计算其子矩形范围内元素的总和&#xff0c;该子矩阵的左上角为 (row1, col1) &#xff0c;右下角为 (row2, col2) 。 实现 NumMatrix 类&#xff1a; NumMatrix(int[][] matrix) 给定整数矩阵 matrix 进…
阅读更多...
Python数据分析案例36——基于神经网络的AQI多步预测(空气质量预测)

Python数据分析案例36——基于神经网络的AQI多步预测(空气质量预测)

案例背景 不知道大家发现了没&#xff0c;现在的神经网络做时间序列的预测都是单步预测&#xff0c;即(需要使用X的t-n期到X的t-1期的数据去预测X的t期的数据)&#xff0c;这种预测只能预测一个点&#xff0c;我需要预测X的t1期的数据就没办法了&#xff0c;有的同学说可以把预…
阅读更多...
部署Sqli-labs靶场：一篇文章解析全过程

部署Sqli-labs靶场：一篇文章解析全过程

部署Sqli-labs靶场&#xff1a;一篇文章解析全过程 0x01 前言 Sqli-labs是一个在线的SQL注入练习平台&#xff0c;提供了一系列关卡供用户练习SQL注入的技巧和防范方法。在这个平台上&#xff0c;用户可以尝试注入攻击&#xff0c;并测试自己的技能和工具&#xff0c;同时也可…
阅读更多...
无心剑七绝《腊八粥香》

无心剑七绝《腊八粥香》

七绝腊八粥香 欣逢腊八粥浓香 五谷丰登聚宝庄 祈福心诚情不尽 佳肴共品待春芳 2024年1月18日 平水韵七阳平韵 这首七言绝句《腊八粥香》以腊八节为背景&#xff0c;描绘了人们欢庆腊八、祈福迎新的情景。 首句“欣逢腊八粥浓香”&#xff0c;开门见山地点明了主题——腊八节&a…
阅读更多...
【笔记】《WebGL 编程指南》第 2 章 WebGL 入门

【笔记】《WebGL 编程指南》第 2 章 WebGL 入门

第一个 WebGL 程序 【P42】 默认情况下&#xff0c;<canvas>是透明的 【P44】 它不直接提供绘图方法&#xff0c;而是提供一种叫上下文&#xff08;context&#xff09;的机制来进行绘图。 【P45】 计算机系统通常使用红、绿、蓝这三原色组合来表示颜色&#xff0c;这种…
阅读更多...
IMX6LL|时钟控制

IMX6LL|时钟控制

一.时钟控制模块 4个层次配置芯片时钟 晶振时钟PLL与PFD时钟PLL选择时钟根时钟/外设时钟 1.1晶振时钟 系统时钟来源 RTC时钟源&#xff1a;32.768KHz&#xff0c;连接RTC模块&#xff0c;进行时间计算。系统时钟&#xff1a;24MHz&#xff0c;芯片主晶振 1.2PLL和PFD倍频时钟…
阅读更多...
十一、常用API——正则表达式

十一、常用API——正则表达式

目录 练习1&#xff1a; 正则表达式的作用 正则表达式 字符类&#xff08;只匹配一个字符&#xff09; 预定义字符&#xff08;只匹配一个字符&#xff09; 数量词 类 Pattern 正则表达式的构造摘要 反斜线、转义和引用 字符类 行结束符 组和捕获 Unicode 支持 与…
阅读更多...
leetcode234. 回文链表

leetcode234. 回文链表

题目 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;hea…
阅读更多...
关于KT6368A双模蓝牙芯片的BLE在ios的lightblue大数量数据测试

关于KT6368A双模蓝牙芯片的BLE在ios的lightblue大数量数据测试

测试简介 关于KT6368A双模蓝牙芯片的BLE在ios的lightblue app大数量数据测试 测试环境&#xff1a;iphone7 。KT6368A双模程序96B6 App&#xff1a;lightblue ios端 可以打开log日志查看通讯流程 测试数据&#xff1a;长度是1224个字节&#xff0c;单次直接发给KT6368A&a…
阅读更多...
ELK之Filebeat输出日志格式设置及输出字段过滤和修改

ELK之Filebeat输出日志格式设置及输出字段过滤和修改

一、Filebeat输出日志格式设置 1.1 编辑vim filebeat.yml文件，修改输出格式设置 # output to console output.console:codec.format: string: %{[@timestamp]} %{[message]}pretty: true### 1.2 测试 执行 ./filebeat -e 可以看到/tmp/access.log（目前文件里只有140.77.188…
阅读更多...
【Java 设计模式】结构型之桥接模式

【Java 设计模式】结构型之桥接模式

文章目录 1. 定义2. 应用场景3. 代码实现结语 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它将抽象部分与实现部分分离&#xff0c;使它们可以独立变化&#xff0c;从而降低它们之间的耦合。桥接模式通过将抽象部分和实现部分分离&#x…
阅读更多...
【PyTorch】PyTorch之Tensors操作篇

【PyTorch】PyTorch之Tensors操作篇

文章目录 前言一、Tensor创建1、TENSOR2、SPARSE_COO_TENSOR3、SPARSE_CSR_TENSOR4、ASARRAY5、AS_TENSOR6、FROM_NUMPY7、FROMBUFFER8、ZEROS和ZEROS_LIKE9、ONES和ONES_LIKE10、ARANGE11、LINSPACE12、LOGSPACE13、EYE14、EMPTY和EMPTY_LIKE15、FULL和FULL_LIKE 前言 介绍Te…
阅读更多...
Docker搭建MySQL主从数据库-亲测有效

Docker搭建MySQL主从数据库-亲测有效

1、测试环境概述 1、使用MySQL5.7.35版本 2、使用Centos7操作系统 3、使用Docker20版本 案例中描述了整个测试的详细过程 2、安装Docker 2.1、如果已经安装docker，可以先卸载 yum remove -y docker \ docker-client \ docker-client-latest \ docker-common \ docker-l…
阅读更多...
Nginx重写功能location与rewrite

Nginx重写功能location与rewrite

1. location 从功能看 rewrite 和 location 似乎有点像&#xff0c;都能实现跳转&#xff0c;主要区别在于 rewrite 是在同一域名内更改获取资源的路径&#xff0c;而 location 是对一类路径做控制访问或反向代理&#xff0c;还可以proxy_pass 到其他机器。 rewrite 对访问的…
阅读更多...
java数据结构与算法刷题-----LeetCode977. 有序数组的平方

java数据结构与算法刷题-----LeetCode977. 有序数组的平方

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 时间复杂度 空间复杂度 O(n * l o g 2 n log_2{n} log2​…
阅读更多...
Qt通用属性工具：随心定义，随时可见（三）

Qt通用属性工具：随心定义，随时可见（三）

传送门: 《Qt通用属性工具&#xff1a;随心定义&#xff0c;随时可见&#xff08;一&#xff09;》 《Qt通用属性工具&#xff1a;随心定义&#xff0c;随时可见&#xff08;二&#xff09;》 《Qt通用属性工具&#xff1a;随心定义&#xff0c;随时可见&#xff08;三&#xf…
阅读更多...
MFC 绘图

MFC 绘图

目录 MFC中绘图 CPaintDC&#xff0c;封装了在WM_PAINT消息中绘图的绘图设备 CClientDC类&#xff0c;封装了在客户区绘图的绘图设备 CGdiObject类(绘图对象类)&#xff0c;封装了各种绘图对象相关的操作 MFC中绘图 Windows绘图需要绘图设备&#xff0c;Win32&#xff1a;…
阅读更多...
最新文章

Copyright @ 2022~2023