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

2024-01-19 07:28

文章标签 javascript 技术使用项目 css vue frontend 图标 uno iconify 20000

本文主要是介绍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的图标
在这里插入图片描述

这篇关于unocss+iconify技术在vue项目中使用20000+的图标的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

http://www.chinasem.cn/article/621662。 23002807@qq.com

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow）定义

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录一.定义：精确模式（默认模式）：全模式：搜索引擎模式： paddle 模式（基于深度学习的分词模式）：二自定义词典三.文本解析调整词出现的频率四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟（1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则（1）运算密集型的Job，少用压缩（2）IO密集型的Job，多用压缩二、压缩算法比较三、压缩位置选择四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Makefile简明使用教程

文章目录规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。规则 makefile文件

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。一、拉取镜像这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p

使用opencv优化图片（画面变清晰）

文章目录需求影响照片清晰度的因素实现降噪测试代码锐化空间锐化Unsharp Masking频率域锐化对比测试对比度增强常用算法对比测试需求对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等影响照片清晰度的因素影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备相机传感器：相机传

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

安装依赖

配置依赖

vue.config.js文件

uno.config.js文件

main.js文件

使用

效果

相关文章