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

news2024/11/19 2:45:33

安装依赖

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.coloradmin.cn/o/1396194.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

Springboot+vue项目部署所有遇到的坑

https://flowus.cn/siriusx/share/0a818075-372b-4948-88af-c75c1d10ceab项目地址及笔记 Spring Boot3VUE3前后端分离项目基于Jwt的校验方案环境搭建安装jdk17 安装mysql server https://ubuntu.com/server/docs/databases-mysql 将服务器root账号由系统验证改为密码验证…

c语言-结构体内存对齐

文章目录前言一、结构体内存对齐总结前言本篇文章介绍结构体内存对齐。一、结构体内存对齐定义两个结构体： struct S1 {char c1;int i;char c2; };struct S2 {char c1;char c2;int i; }; //输出结构体大小 int main() {printf("%u\n", sizeof(st…

提升开发效率，Fiddler Everywhere for Mac助您解决网络调试难题

在现代软件开发中，网络调试是一个不可或缺的环节。无论是前端开发还是后端开发，我们经常需要对网络请求进行监控和调试，以便及时发现并解决问题。而Fiddler Everywhere for Mac作为一款强大的网络调试工具，能够帮助开发者提升工作…

【01】mapbox js api加载arcgis切片服务

需求： 第三方的mapbox js api加载arcgis切片服务，同时叠加在天地图上，天地图坐标系web墨卡托。效果图： 形如这种地址去加载http://zjq2022.gis.com:8080/demo/loadmapboxtdt.html 思路： 需要制作一个和天地图比例…

视觉检测系统：工厂生产零部件的智能检测

在工厂的生产加工过程中，工业视觉检测系统被广泛应用，并且起着重要的作用。它能够对不同的零部件进行多功能的视觉检测，包括尺寸和外观的缺陷。随着制造业市场竞争越来越激烈，对产品质检效率的要求不断提高，传统的人工…

EMQX安装和Java使用

一、EMQX介绍 EMQX是大规模分布式MQTT消息服务器，可以高效可靠连接海量物联网设备，实时处理分发消息与事件流数据，助力构建关键业务的物联网与云应用。EMQX 作为物联网应用开发和物联网平台搭建必须用到的基础设施软件，主要在边缘…

田园好比一幅美丽的画

一望无垠的麦田，清新的空气，茂密的小树林，这一切都呈现在田园里。清晨，东方刚刚泛起了鱼肚白，一切都雾蒙蒙的，仿佛给大地披上了一层薄薄的轻纱，大地在沉睡当中，小花沉静在美梦中&am…

ARM64汇编01 - 环境搭建

arm官方手册由于市面上几乎没有arm相关书籍，所以推荐看官方文档。虽然是英文的，看不下去也要硬看，毕竟搞这方面的还是得有啃英文文档/书籍的能力。另外，再推荐一个翻译网站：https://www.deepl.com/zh/translator …

git报错：Failed to connect to github.com port 443: Timed out

git提交报错 git报错：Failed to connect to github.com port 443: Timed out解决办法使用ping github.com 发现ping不通修改hosts文件，让主机跳过DNS服务器直接根据hosts配置信息进行替换域名在ipaddress.com查询Github真实IP地址打开hosts文件添加…

【Java SE】基础知识回顾——【13.线程 | 同步】

【线程同步】第一章 Thread 1.1 Thread类 /*** author 270* 获取线程的名称：* 1.使用Thread中的方法getName()* String getName() 返回该线程的名称* 2.可以获取到当前正在执行的线程，使用线程中的方法getName()获…

【年度TikTok电商数据解析】火遍全网！出单率超高！这个产品会成为2024年卖家新宠吗？

随着大众对口腔健康越来越重视，消费者对漱口水、牙线、口腔清新剂等口腔卫生产品形成深度依赖。当然，这一趋势对于我们TikTok爆款商机打造息息相关。然而，在目前的口腔护理赛道，高露洁、宝洁、飞利浦等巨头盘踞，掌握…

Spring重要知识点

一、Spring中相关概念 1.IOC 控制反转 IoC（Inverse of Control:控制反转）是⼀种设计思想，就是将原本在程序中⼿动创建对象的控制权，交由Spring框架来管理。IoC 在其他语⾔中也有应⽤，并⾮ Spring 所独有。 IoC 容器…

政务服务场景为何要打造AI交互数字人？

随着Chat GPT兴起，越来越多服务场景通过AI交互数字人以多模态交互形式实现人机交互。如近日昆山市档案馆推出了AI交互数字人“昆兰”，数字人设置于市档案馆一楼大厅入口处，市民可以与AI交互数字人进行实时问答交流，了解总书记关于…

使用 Docker 部署的WAF：雷池社区版

Web应用防火墙（WAF）是保护网站不受恶意攻击的关键组件。使用 Docker 部署雷池社区版，可以大大简化安全管理工作。一、WAF 雷池社区版简介雷池社区版是一种流行的开源 Web 应用防火墙，它提供基本的安全保护，如防止…

【C++】：STL序列式容器list源码剖析

一、list概述总的来说：环形双向链表特点： 底层是使用链表实现的，支持双向顺序访问在list中任何位置进行插入和删除的速度都很快不支持随机访问，为了访问一个元素，必须遍历整个容器与其他容器相比，额外…

小蓝和小桥的挑战*

题目 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int t sc.nextInt();sc.nextLine();while(t-- > 0) {int n sc.nextInt();sc.nextLine();int[] a new int[n];for(int i0;i<n;i)a[i…