unocss+iconify技术在vue项目中使用20000+的图标-编程知识

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

news/2024/11/21 1:39:41/文章来源:https://blog.csdn.net/qq_42618566/article/details/135680388

安装依赖

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.hqwc.cn/news/412611.html

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

LRU Cache

文章目录 1. 什么是LRU Cache2. LRU Cache的实现3. LRU Cache的OJ题目分析AC代码 1. 什么是LRU Cache LRU是Least Recently Used的缩写，意思是最近最少使用，它是一种Cache替换算法。什么是Cache？ 狭义的Cache指的是位于CPU和主存间的快速RAM…

一、一对多关联 eg：一个用户对应多个订单建表语句 CREATE TABLE t_customer (customer_id INT NOT NULL AUTO_INCREMENT, customer_name CHAR(100), PRIMARY KEY (customer_id) ); CREATE TABLE t_order ( order_id INT NOT NULL AUTO_INCREMENT, order_name C…

burp靶场--ssrf

burp靶场–ssrf 1.什么是ssrf 服务器端请求伪造是一种 Web 安全漏洞，允许攻击者导致服务器端应用程序向非预期位置发出请求。在典型的 SSRF 攻击中，攻击者可能会导致服务器连接到组织基础设施内的仅供内部使用的服务。在其他情况下，他们可…

LeetCode 104. 二叉树的最大深度

104. 二叉树的最大深度给定一个二叉树 root ，返回其最大深度。二叉树的最大深度是指从根节点到最远叶子节点的最长路径上的节点数。示例 1： 输入：root [3,9,20,null,null,15,7] 输出：3示例 2： 输入&#xff1…

SpringBoot中整合MybatisPlus快速实现Mysql增删改查和条件构造器

场景 Mybatis-Plus(简称MP)是一个Mybatis的增强工具，只是在Mybatis的基础上做了增强却不做改变，MyBatis-Plus支持所有Mybatis原生的特性， 所以引入Mybatis-Plus不会对现有的Mybatis构架产生任何影响。MyBatis 增强工具包，简化 C…

短视频代运营抖音项目规划管理计划模板

【干货资料持续更新，以防走丢】短视频代运营抖音项目规划管理计划模板部分资料预览资料部分是网络整理，仅供学习参考。短视频代运营模板（完整资料包含以下内容） 目录具体的表格设计和内容可能因不同的情况和需求而有所变…

重拾计网-第一弹

🎉欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克🍹 ✨博客主页：小小恶斯法克的博客 🎈该系列文章专栏：重拾计算机网络 🍹文章作者技术和水平很有限，如果文中出现错…

BIOS知识枝桠——RAID 磁盘阵列

文章目录前言一、RAID介绍二、RAID等级分类1.RAID02.RAID13.RAID24.RAID3和RAID45.RAID5和RAID66.RAID77.RAID10 BIOS下组建RAID 前言假设存在多块磁盘，如果不组建阵列，磁盘与磁盘之间是没有任何关系的。磁盘A和B，放在A中的文件与B磁盘没有…

k8s---对外服务 ingress

目录目录目录 ingress与service ingress的组成 ingress-controller： ingress暴露服务的方式 2.方式二：DaemonSethostnetworknodeSelector DaemonSethostnetworknodeSelector如何实现 3.deploymentNodePort： 虚拟主机的方式实现http代…